The DOM ForestISSUE #17 of 21

event types · pointer · touch · drag

NodetteVSThe Event Bubbler

Nodette saysPointer events unify mouse, touch, and pen; touch events handle multi-finger gestures.

pointerdown/pointermove/pointerup work for mouse, touch, and stylus with one code path — the modern default for interactions. event.pointerType tells which. setPointerCapture keeps tracking even when the pointer leaves the element (great for sliders/drags). Raw touch events still exist for advanced multi-touch.

Power-ups you unlock

pointer* unifies mouse/touch/pen
event.pointerType identifies the input
setPointerCapture keeps tracking off-element
Use these for drags and custom controls

The Event Bubbler attacks — common mistakes

Writing separate mouse and touch code paths
Forgetting setPointerCapture for off-element drags
touch-action not set, fighting browser gestures

Boss battleDrag a box with pointerdown/move/up and pointer capture.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><div id="o">pointer demo</div>
<script>addEventListener('pointerdown',e=>document.getElementById('o').textContent='down via '+e.pointerType);</script></body></html>

▶ Open the interactive comic issue

‹ Event Types · Mouse · Mousedown · Mouseup · Wheel Event Types · Focus · Blur · Load · Resize ›