Pointer event suppression on drag start

at a glance

what changed

When the user initiates a drag on an element, the browser begins managing pointer input at the OS level to handle the drag gesture. The HTML specification says the browser must indicate to the drag source that the pointer event stream has ended — i.e., fire the events that tell the element "you are no longer receiving pointer events."

Before Chrome 148, this was only partially done: touch drags on Android fired these events, but mouse-based drags on desktop did not. Chrome 148 completes the implementation: whenever a drag starts, the drag source now receives:

• pointercancel — the pointer has been cancelled and no more events will follow
• pointerout — the pointer has left the element's hit-testing area
• pointerleave — the pointer has left the element (bubbles up the ancestor chain)

why it matters

Code that listens for pointercancel to clean up state (e.g., remove a CSS class applied on pointerdown, cancel an in-progress gesture, or release a pointer capture) now works correctly on desktop during drag operations. Previously, desktop drag sources would not receive pointercancel, so cleanup code that relied on it was never triggered for mouse drags.

element.addEventListener('pointerdown', (e) => {
  element.classList.add('dragging');
  element.setPointerCapture(e.pointerId);
});

// Before Chrome 148: this never fired on desktop mouse drag start
// Chrome 148+: fires correctly when a drag begins
element.addEventListener('pointercancel', () => {
  element.classList.remove('dragging');
});

event order on drag start

When the browser decides a drag has begun, the event sequence at the drag source is:

After these events fire, no further pointer events are dispatched to the drag source for that pointer until a new pointerdown occurs.

browser support

see also

• MDN: Pointer events
• MDN: pointercancel event
• MDN: HTML Drag and Drop API
• HTML spec — Drag and drop processing model
• chromestatus.com — Pointer event suppression on drag start (6732314958757888)