Pointer events model

Summary

Unified mouse/touch/pen — pointerdown vs separate touch handlers. touch-action CSS prevents scroll delay; passive: false only when preventDefault needed. Hit testing order follows stacking context. Mobile 300ms tap delay largely gone with viewport meta + pointer events.

Code example

element.addEventListener('pointerdown', (e) => {
  element.setPointerCapture(e.pointerId);
});

element.addEventListener('pointerup', (e) => {
  element.releasePointerCapture(e.pointerId);
});

Key points

• Unified mouse/touch/pen — pointerdown vs separate touch handlers.
• touch-action CSS prevents scroll delay; passive: false only when preventDefault needed.
• Hit testing order follows stacking context.
• Mobile 300ms tap delay largely gone with viewport meta + pointer events.

Further reading

• Pointer events
• touch-action

Related concepts

• ARIA live regions internals