[pointerevents] Event sequence when long tapping an image (#503)

lpd-au has just created a new issue for https://github.com/w3c/pointerevents:

== Event sequence when long tapping an image ==
I wrote a quick demo to see which pointer events and compatibility mouse events are fired in each mobile browser when long tapping on an `<img>`: https://output.jsbin.com/zeroqih

Below is what I found:

| Desktop (FF) | Firefox | Chrome | Safari (wtc: none) | Safari (wtc: default) |
| ------------- | ------- | -------- | ---------------| -------------------|
| pointerover | pointerover | pointerover | pointerover | pointerover |
| pointerenter | pointerenter | pointerenter | pointerenter | pointerenter |
| | pointerdown | pointerdown | pointerdown | pointerdown |
| pointermove | _(pause)_ | pointermove | _(pause)_ | _(pause)_ |
|  |  | ...  _(approx 20-50x)_ |  |  |
|  |  | pointermove |  |  |
| mouseover | mouseover | mouseover | mouseover | mouseover |
| mouseenter | mouseenter | mouseenter | mouseenter | mouseenter |
| mousemove | mousemove | mousemove |  |  |
| _(RMB depressed)_ |  |  |  |  |
| pointerdown |  |  |  |  |
| mousedown |  |  | mousedown | mousedown |
| _(pause until release)_ |  |  | _(pause until release)_ | _(pause)_ |
| pointerup |  |  | pointerup |  |
| mouseup |  |  |  |  |
| auxclick |  |  |  |  |
| contextmenu | contextmenu | contextmenu |  |  |
|  | pointercancel | pointercancel |  | pointercancel |
| pointerout | pointerout | pointerout | pointerout |  |
| pointerleave | pointerleave | pointerleave | pointerleave |  |
| mouseout |  |  |  |  |
| mouseleave |  |  |  |  |

The notable differences from my pov are:

1. Safari for iOS never fires a `contextmenu` event, despite opening a very similar image-specific menu to the Android browsers (when `-webkit-touch-callout` is absent).
2. Both Android browsers fire a `mousemove` event but Safari for iOS always fires a `mousedown` event instead (although without a `mouseup`).
3. No matter how precisely you lower and raise your finger, Chrome for Android fires a bunch of `pointermove` events (I guess for pressure changes?), whereas Firefox for Android and Safari for iOS typically fire none unless you jiggle around your finger.

Are 1 and 2 in particular currently allowed by the spec, and in the working group's opinion, should they be?

I have a legacy site that for mouse input, currently shows a html tooltip when hovering over a custom button. To provide more reasonable behaviour for touch input, I figured I'd show the tooltip when the button is either panned over or long tapped. With the differences above, this proved way more difficult than I expected:

* Cancelling the native context menu is handled by preventing the default action of an event or adding a CSS property in different browsers.
* The events fired when the tap has been held long enough to become a long tap are different in different browsers.
* Even after accounting for the above two factors, some browsers will then show the tooltip almost immediately at the start of the tap because they fire `pointermove` events that others don't, even when the user's finger is stationary and lifting it would trigger a `click` event on the button. Resolving this requires listening for a 4th event type and tracking state.

Please view or discuss this issue at https://github.com/w3c/pointerevents/issues/503 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 6 May 2024 19:07:31 UTC