Draggable objects: test page with pointerevent log

 from Red Blob Games
4 Jan 2023

This diagram has a <text> and <circle> inside a <g>, and the <g> has an event logger. The reason I have nested elements is that you can see how pointerover/pointerout differs from pointerenter/pointerleave.

TestLR
Logging pointerevents other than move



The second test shows the event data: (pointer type can be mouse, pen, touch ; pressure can be 0 to around 4, and mac trackpads can send pressure data)

TEST

https://patrickhlauke.github.io/touch/[1] has a lot of touch event tests

Using preventDefault() on a pointer event should cancel the corresponding mouse event or touch event.

https://developer.mozilla.org/en-US/docs/Web/API/Force_Touch_events[2] seems to be active on my mac laptop (touchpad is force sensitive) but not on my phone

On iPhone I don’t get a TouchEvent.force or PointerEvent.pressure. On Android I do get that value in both Chrome and Firefox.

Chrome has a bug about[3] the up event not following the contextmenu, and a followup bug[4] and related bug[5] about enter/leave events. The mouseleave event doesn’t get sent on contextmenu.

https://github.com/WICG/auxclick/issues/1[6] - says contextmenu should be after mousedown on linux, after mouseup on windows, and auxclick should be after contextmenu. But auxclick runs before contextmenu on windows.

javascript.info[7] has a demo of click event logging but theirs does not run into the same problem as I have with the contextmenu. It’s because they trap the contextmenu event so the up event is correct.

https://w3c.github.io/uievents/#event-type-auxclick[8]

On Mac, ctrl+click triggers contextmenu without triggering up/down or click events.

https://bugs.chromium.org/p/chromium/issues/detail?id=1264930[9] → a contextmenu should produce a PointerEvent that has .pointerId the same as the id of the event that produced that menu. It is fixed on Chrome but it is undefined on Firefox, because Firefox 110 and Safari 13 produce a MouseEvent not a PointerEvent[10].

https://bugs.chromium.org/p/chromium/issues/detail?id=958776[11] → asks for contextmenu to fire pointercancel. It can’t fire pointerup because that looks like a click.

https://bugs.chromium.org/p/chromium/issues/detail?id=958776[12] → reports that in Chrome 21, right click does fire mouseup but only if it’s quick; otherwise it doesn’t fire mouseup.

https://bugs.chromium.org/p/chromium/issues/detail?id=627889[13] → chrome decided not to issue pointercancel after a contextmenu

https://bugs.chromium.org/p/chromium/issues/detail?id=149091[14] lists platform and browser differences as of 2017.

https://twitter.com/kaleidealogy/status/1430871635968634880[15] → pointer down and pointer up may not be on the same button. It says pointermove will get called on subsequent button changes!! This is different from mouse events!! https://w3c.github.io/pointerevents/#chorded-button-interactions[16]

I can’t seem to see button4 or button5 in these events.

https://navidz.github.io/pointerrawupdate.html[17] - experimental, in chrome/edge but not safari/firefox https://caniuse.com/mdn-api_element_pointerrawupdate_event[18]

https://www.w3.org/TR/pointerevents3/#mapping-for-devices-that-support-hover[19]

List of pointer event tests and whether they pass in each browser and each device type[20]