demo · v136
Captured pointer click
Press the mouse on box A, drag, and release the mouse on box B. Toggle pointer capture — before 136 the click fires on the nearest ancestor of A & B; from 136 it fires on whichever element holds the capture at pointerup.
Press & drag from A to B and watch the log below.
Box A — pointerdown here
Box B — release here
A green "click" row in the log = a synthesised click event reached an element. With capture on, that element is A (Chrome 136 behaviour). With capture off, it's the common ancestor (the parent div).
the code
a.addEventListener("pointerdown", e => {
a.setPointerCapture(e.pointerId); // own this pointer
});
a.addEventListener("click", () => {
// Pre-136: this only fires if pointerup also lands on A
// (or a common ancestor handles it)
// 136+: fires on A even if release was over B,
// because A captured the pointer.
});