Pointer Events

Pointer events, Widely available since January 2023, give mouse, pen and touch one model: pointerdown, pointermove, pointerup, pointercancel and the over/out/enter/leave family, with pointerId, pointerType, pressure, width/height, tiltX/tiltY and isPrimary. setPointerCapture() keeps a drag's events on your element after the finger leaves it. Playwright 26,280 dragged the mouse and tapped the screen in headless Chrome 152 1 :

One handler for mouse, pen and touchJavaScript

const pad = document.querySelector('#pad');                // CSS: touch-action: none
pad.addEventListener('pointerdown', (e) => pad.setPointerCapture(e.pointerId));
for (const type of ['pointerdown', 'pointerup']) {
  pad.addEventListener(type, (e) => console.log(
    `${type} ${e.pointerType}#${e.pointerId} at ${e.offsetX},${e.offsetY} pressure=${e.pressure}`));
}

Output

pointerdown mouse#1 at 10,10 pressure=0.5
pointerup mouse#1 at 40,30 pressure=0
pointerdown touch#2 at 120,80 pressure=1
pointerup touch#2 at 120,80 pressure=0

Mice without pressure hardware report 0.5 while pressed. Without touch-action: none the browser may start scrolling and fire pointercancel. Drawing apps call e.getCoalescedEvents() to recover samples merged into one frame (Safari 10 since 18.2).

MENU

Pointer Events