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.

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.

• javascript
• html
• touch
• mouse
• pointer-events

1 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.