v147 · Demo 1

Event Stream Visualiser

Drag the card and watch the full pointer event sequence — including the new pointercancel → pointerout → pointerleave trio that Chrome 147 sends when a drag captures the pointer.

pointer start
drag events
stream terminated (new in Chrome 147)
pointer end

Drag source

☰ Drag me
Drop target
Event Log
Events appear here — start a drag.

how it works

const el = document.querySelector('[draggable]');

// These three now fire on drag start in Chrome 147+
el.addEventListener('pointercancel', (e) => {
  // "I've lost control — a drag captured the pointer"
  console.log('pointercancel', e.pointerId);
  resetDragState(); // ← reliable cleanup, no heuristics needed
});
el.addEventListener('pointerout',   () => console.log('pointerout'));
el.addEventListener('pointerleave', () => console.log('pointerleave'));

see also