New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Clarify what the target of the click event should be after capturing pointer events #356
Comments
|
My intuition is that because the pointer capture effectively targets all events at the captured element, it should at least override the target of the up event when determining the common ancestor for the click. This seems to match chrome's current behavior, specifically,
However, I think we may want to go further and consider setting capture to have effectively changed the down target to be blue as well. This would make all 4 cases a blue click. |
The more I think, the better having click firing on the capture target feels. Otherwise click may fire basically in any random ancestor. However, if capture is released explicitly before *up event, then it wouldn't affect click targeting. |
I am looking into measuring in Chrome the fraction of page-loads that have different |
In PEWG, we are considering making the target of a click event the same as the pointerup target when the pointerup event is dispatched to a captured target. Currently the click event target is the common ancestor of pointerdown and pointerup targets. Before we make the change, we want to check what fraction of page loads would be affected by this possible change in click target. Spec discussion: w3c/pointerevents#356 Fixed: 1199099 Change-Id: I9e28c9ab5138f187635352a74befb8cb800aa80a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2876145 Commit-Queue: Mustaq Ahmed <mustaq@chromium.org> Reviewed-by: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/master@{#893096}
In Chrome we just landed a counter for this measurement. We will update this thread when we have sufficient data...in the worst case it could be a few months if we have to wait for next Stable release. |
FYI: We got a Chrome bug few days ago reporting an unclickable link that works in Safari. The site is using pointercapture to a parent element and expecting |
This bug gets into the more complicated area of releasing capture. The case in the bug is clicking on descendant in the following: <div id="a">
<div id="b"></div>
</div>
<script>
a.addEventListener('pointerdown', (e) => {
a.setPointerCapture(e.pointerId);
});
a.addEventListener('pointerup', (e) => {
a.releasePointerCapture(e.pointerId);
});
b.addEventListener('click', (e) => {
console.log('clicked');
});
</script> The capture is released before the click event, which raises questions about whether click should no longer be captured. In this particular case, it shouldn't matter since I'd argue that the pointerup was captured so the click target should still be the common ancestor of the captured up event (i.e. #a) and the down event (i.e. #b), so we would target the click at #a and not fire the click event. However, what if we set pointer capture on a different element? <body>
<div id="a">
<div id="b">
</div>
</div>
<div id="c"></div>
</body>
<script>
a.addEventListener('pointerdown', (e) => {
c.setPointerCapture(e.pointerId);
});
c.addEventListener('pointerup', (e) => {
c.releasePointerCapture(e.pointerId);
});
c.addEventListener('click', (e) => {
console.log('clicked');
});
</script> Do we consider the captured pointerup to have also captured the corresponding click even though it hasn't been dispatched yet? Or would we target the click at the common ancestor of the down event target (#b) and up event target (#c), i.e. the body. |
To me, the two cases you mentioned look exactly the same as clicking respectively on "blue" and "green" in the original repro. Yes, the original repro releases implicitly, and yours releases explicitly. But in both cases, |
This is the question really. If you never explicitly release capture, shouldn't the click be captured as well? I.e. dispatched to #c in my second example. In fact it seems the spec explicitly says that the click should still be captured under implicit release of pointer capture:
As such, it seems that the click should be captured and #c should be the click target in my second example. |
A similar case to think about: <div><button></button></div>
All browsers seem to agree that the div gets the click. In which case, shouldn't this behave the same?:
|
I guess all the other cases have equivalents where elements move around after Here's a remix of the test case https://output.jsbin.com/masazab/3/. The results seem more consistent with what Chrome is currently doing with pointer capture. |
pointerEvents css case has very little to do with this. Hit test in that case gets to the div element, so div should get the click. |
In the Isn't that roughly the same in terms of event targeting? |
It is quite different from hit testing and from API usage point of view. |
With |
Releasing a button outside capturing element causes |
Posting here because I'm working on a web app which uses setPointerCapture and has a fairly complex use case, namely a graph editor (https://noisecraft.app/101). I keep running into inconsistencies into the way pointer capture works across Chrome/Safari/FF and it's driving me insane. I really think Chrome has the best behavior with respect to pointer capture and In my specific use case, my graph editor has a knob node, and you can "grab" the knob with your pointer to change its value. This involves clicking on the knob and then moving the mouse outside of the knob's area, and releasing the knob when you've reached the value you want. In Chrome this works well, in Firefox and FF, a So please, please, please, make it so that |
The problem is that capture is released before click is dispatched. Per current specifications click is dispatched to the common ancestor of *down and *up events. masayuki has a good point too and I think if the API hadn't been shipping now for years, I'd go with that behavior. But since the That leaves still though the question where click should be dispatched if capture was explicitly released in pointerup. In that case I would expect click to go to the common ancestor of down/up. One thing to think about is that click event often opens new windows or may trigger alert() etc. I believe those wouldn't cause problems here, but anyhow something to keep in mind. |
Just realized that the Chrome behavior mentioned in #356 (comment) is only for mouse pointers! For touch pointers, the And this behavior has been there since we (Chrome) shipped PointerEvents! We never got a chance to report the counter data we added a while ago (#356 (comment)). Expecting to report back in a week. |
+1 I agree. The common ancestor of the down/up targets makes sense if you have explicitly released capture. |
Hmm, I guess we need to test also other mobile browsers. I don't have access to Safari, but will test Firefox on Android in a moment. |
Mobile Firefox (Android) works in cases 1 and 2 like desktop, and 3 and 4 don't dispatch click. |
Given that all the browsers do different things, we're going to take a look at whether it was possible to implement setup where lostpointercapture is fired after click, and click's target is the captured element. |
It sounds reasonable.
So the |
yes, if one explicitly releases capture, then the behavior should be that. |
Here is the same testcase but for testing with touch. The only difference here is the |
Here are the Chrome bugs we filed:
This new test page now covers |
In PEWG, we are considering making the target of a click event the same as the pointerup target when the pointerup event is dispatched to a captured target. Currently the click event target is the common ancestor of pointerdown and pointerup targets. Before we make the change, we want to check what fraction of page loads would be affected by this possible change in click target. Spec discussion: w3c/pointerevents#356 Fixed: 1199099 Change-Id: I9e28c9ab5138f187635352a74befb8cb800aa80a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2876145 Commit-Queue: Mustaq Ahmed <mustaq@chromium.org> Reviewed-by: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/master@{#893096} NOKEYCHECK=True GitOrigin-RevId: d424e6fa4b7c39e4961a0e681072b7b5c6c3655f
Latest results using the new test page, with
|
Latest results using the new test page, with
|
edited the above table to just highlight (bold, italic, square brackets) the outliers (the click events, and that one "green pointerup" in row 2 for Safari on iOS) |
heads-up: i forked/extended @mustaqahmed's codepen to also include https://codepen.io/patrickhlauke/full/MWzapmz I'll rerun the tests and post the results here. |
After doing a deep dive into this I feel like if the pointerup was captured we should send the click to blue. I think this makes sense even in cases when the capture has been explicitly released or lost because the click is not independently targeted but depends on the down and up events. Since the up which resulted in the click was captured - I think it's reasonable that this becomes the click target. I don't think we need to send boundary events because we already don't send boundary events that would be implied by the click going to the common ancestor. E.g. without pointer capture pressing down on green and up on blue will send click to gray without sending mouseout to blue. One use case we came up with is if you had a slider with a thumb but you wanted to give it a generous hit testing area by setting pointer capture. It seems reasonable that the click should go to the thumb whether the initial down event actually hit it or not. |
Thanks @flackr for the discussion today, I agree with your conclusion above. The main takeaway for me is that even in the traditional MouseEvent world (without capturing), It is logical that the PointerEvents spec would extend this special targeting behavior to include Pointer Capture: the |
I just confirmed that I will add a similar test for |
This CL adds/fixes two WPTs to match two recent spec resolutions: w3c/pointerevents#356 w3c/pointerevents#357 - Fixes the WPT for click target with capture, and - Adds a similar WPT for auxclick. Bug: 40851618 Change-Id: Ide9da78897cd7a03135a2d70f41cade1e00cb2f3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5301480 Commit-Queue: Robert Flack <flackr@chromium.org> Auto-Submit: Mustaq Ahmed <mustaq@chromium.org> Reviewed-by: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1264738}
This CL adds/fixes two WPTs to match two recent spec resolutions: w3c/pointerevents#356 w3c/pointerevents#357 - Fixes the WPT for click target with capture, and - Adds a similar WPT for auxclick. Bug: 40851618 Change-Id: Ide9da78897cd7a03135a2d70f41cade1e00cb2f3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5301480 Commit-Queue: Robert Flack <flackr@chromium.org> Auto-Submit: Mustaq Ahmed <mustaq@chromium.org> Reviewed-by: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1264738}
Done with WPT. |
… match PointerEvent spec., a=testonly Automatic update from web-platform-tests [Interop] Fix/add click/auxclick WPTs to match PointerEvent spec. This CL adds/fixes two WPTs to match two recent spec resolutions: w3c/pointerevents#356 w3c/pointerevents#357 - Fixes the WPT for click target with capture, and - Adds a similar WPT for auxclick. Bug: 40851618 Change-Id: Ide9da78897cd7a03135a2d70f41cade1e00cb2f3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5301480 Commit-Queue: Robert Flack <flackr@chromium.org> Auto-Submit: Mustaq Ahmed <mustaq@chromium.org> Reviewed-by: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1264738} -- wpt-commits: 8960484e82396a39b2cedd684d53b983f9d22ac4 wpt-pr: 44758
… match PointerEvent spec., a=testonly Automatic update from web-platform-tests [Interop] Fix/add click/auxclick WPTs to match PointerEvent spec. This CL adds/fixes two WPTs to match two recent spec resolutions: w3c/pointerevents#356 w3c/pointerevents#357 - Fixes the WPT for click target with capture, and - Adds a similar WPT for auxclick. Bug: 40851618 Change-Id: Ide9da78897cd7a03135a2d70f41cade1e00cb2f3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5301480 Commit-Queue: Robert Flack <flackr@chromium.org> Auto-Submit: Mustaq Ahmed <mustaq@chromium.org> Reviewed-by: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1264738} -- wpt-commits: 8960484e82396a39b2cedd684d53b983f9d22ac4 wpt-pr: 44758
In PEWG, we are considering making the target of a click event the same as the pointerup target when the pointerup event is dispatched to a captured target. Currently the click event target is the common ancestor of pointerdown and pointerup targets. Before we make the change, we want to check what fraction of page loads would be affected by this possible change in click target. Spec discussion: w3c/pointerevents#356 Fixed: 1199099 Change-Id: I9e28c9ab5138f187635352a74befb8cb800aa80a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2876145 Commit-Queue: Mustaq Ahmed <mustaq@chromium.org> Reviewed-by: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/master@{#893096} Former-commit-id: d424e6fa4b7c39e4961a0e681072b7b5c6c3655f
This CL adds/fixes two WPTs to match two recent spec resolutions: w3c/pointerevents#356 w3c/pointerevents#357 - Fixes the WPT for click target with capture, and - Adds a similar WPT for auxclick. Bug: 40851618 Change-Id: Ide9da78897cd7a03135a2d70f41cade1e00cb2f3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5301480 Commit-Queue: Robert Flack <flackr@chromium.org> Auto-Submit: Mustaq Ahmed <mustaq@chromium.org> Reviewed-by: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1264738} Former-commit-id: 776d15695623e52b9d8a571d97f43229debe04a9
This is split from #75
Testcase
We need some table here to compare the current behavior of various browser engines.
The text was updated successfully, but these errors were encountered: