Touch Events & Pointer Events

Also Known As

TL;DR

Explanation

Touch Events (legacy): touchstart, touchmove, touchend — each has a touches list of all active contact points. Pointer Events (modern): pointerdown, pointermove, pointerup, pointercancel — single event model for mouse (pointerId=1), touch (multiple pointers), and stylus. Use Pointer Events in new code. Touch performance: passive event listeners (addEventListener('touchstart', fn, {passive: true})) tell the browser the listener won't call preventDefault(), allowing scroll optimisation without waiting for JS. 300ms click delay: eliminated in modern browsers; add touch-action: manipulation to CSS as a belt-and-braces fix.

Common Misconception

Why It Matters

Common Mistakes

• Non-passive touchstart/touchmove listeners — causes 50-200ms scroll delay.
• Using touchstart without touchend and touchcancel — incomplete gesture handling.
• Different code paths for touch and mouse — use Pointer Events for unified handling.
• Tap targets under 44x44px — too small for reliable touch input.

Code Examples

// Blocks scroll — browser waits for JS before scrolling:
document.addEventListener('touchstart', handleTouch);
// Default: {passive: false} — browser must wait for JS

// Separate mouse and touch handlers — maintenance burden:
element.addEventListener('click', handler);
element.addEventListener('touchstart', handler);

// Pointer Events — unified, immediate:
document.addEventListener('pointerdown', e => {
    if (e.pointerType === 'touch') handleTouch(e);
    else handleMouse(e);
});

// Passive scroll listener — does not block scrolling:
document.addEventListener('touchmove', handleMove, { passive: true });

/* CSS — eliminate 300ms delay: */
/* button, a { touch-action: manipulation; } */

// Multi-touch:
document.addEventListener('pointerdown', e => {
    activePointers.set(e.pointerId, e); // Track each finger
});

References

• ↗ https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events

Tags

Related Terms