pointer events vs touch and mouse events

Question

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.

Answer 1

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.