5

I'm building an interface that should work with mouse or touch. My user may have difficulty hitting their desired target because of a variety of physical issues.

Pointer events seem perfect for this but I get different behavior.

I want to know when the pointer enters and leaves a target, as well as when it is down. Using the mouse if I press a mouse button over target T1 and move (while holding the button) to target T2 I get pointerover T1, pointerdown T1, pointerout T1, pointerover T2, pointerup T2. Just what I expect.

With a touch screen I get: pointerover T1, pointerdown T1, pointerup T1. No signal that I moved from one target to another.

How do I make touch behave more like the mouse?

This is on Chrome 99 on Linux Ubuntu.

GaryBishop
  • 3,204
  • 2
  • 23
  • 19

1 Answers1

8

The answer is here call releasePointerCapture if the target has captured the pointer.

div.addEventListener('pointerdown', function(e) {
  if (e.target.hasPointerCapture(e.pointerId)) {
      e.target.releasePointerCapture(e.pointerId);
  }
}

Then touch behaves like the mouse.

GaryBishop
  • 3,204
  • 2
  • 23
  • 19
  • Thank you very much! I tried many things to make the touch events work like mouse events, but nothing worked. Now it works like a charm! – Bruno May 27 '22 at 12:05