v147 · DOM · Pointer Events

Pointer event suppression on drag start

When an HTML drag starts, Chrome 148 now sends pointercancel, pointerout, and pointerleave to the drag source — fulfilling the Pointer Events spec that previously fired these only during scroll and zoom gestures.

concepts

  1. Event Stream Visualiser

    Drag the card and watch pointerdown, dragstart, then the new pointercancel → pointerout → pointerleave sequence appear in real time on the event log.

    Live API Pointer Events Drag & Drop

  2. Before / After Comparison

    Side-by-side simulation showing the event sequence a drag source used to receive (no suppression) versus what it receives in Chrome 148+, so you can update any pointer-state guards in your drag code.

    Interactive Migration Guide

  3. Event Sequence Explorer

    Drag three different elements (draggable, non-draggable, list item) and inspect the exact timestamped event sequence — filtered by event type — to see where pointercancel fires relative to dragstart in Chrome 148+.

  4. Drag Event Simulator

    Drag a chip to see the complete event sequence with a live sequence diagram. Toggle "Old behavior" to compare pre-Chrome 148 output (no pointercancel). A frame-by-frame replay re-animates the last drag with every event highlighted in order.

  5. Compatibility Lab

    Detects whether pointercancel fires on drag start via a live drag test. Shows current browser event sequence, compares Chrome 148+ vs older behaviour, and provides the pointercancel guard pattern for safely resetting pointer state in drag libraries.

why it shipped

The Pointer Events specification has always required a pointercancel event when the browser "captures" a pointer for its own gesture — like scrolling or pinch-zoom. HTML Drag and Drop is conceptually the same: once a drag begins, the drag source should receive a final pointercancel to close the event stream, followed by pointerout and pointerleave. Chrome had implemented this for touch drags on Android but not for mouse drags on desktop. Chrome 148 closes the gap on all platforms, aligning with Firefox and allowing drag-and-drop libraries to reliably reset any pointer-state bookkeeping — such as cursor changes, element highlights, and active-drag class names — without relying on heuristics.

references