v147 · Events · Drag

Event Sequence Explorer

Drag different elements and see the exact event sequence with timestamps. Chrome 147 adds pointer event suppression on drag start — a pointercancel now fires immediately when drag begins, preventing stale pointer events from confusing gesture handlers.

Drag any item below. The log captures every pointer, mouse, and drag event in arrival order.

Draggable A
Draggable B try me
Not draggable
Start dragging to see event sequence.

the Chrome 147 change

// Before Chrome 147: pointer events continued even during a drag
// This caused gesture recognisers to receive confusing pointermove events
// while the HTML5 drag was already underway

// Chrome 147: pointercancel fires immediately when dragstart fires
// → clears the pointer capture state early
// → gesture handlers reliably know the pointer sequence has ended

element.addEventListener('pointercancel', e => {
  // In Chrome 147+, this fires on drag start
  // e.cancelable === false (can't prevent it)
  cleanUpGesture();  // safe to call — sequence is definitively over
});

references