demo · v144

Swap vs Remove

Two scenarios authors care about: (a) replacing the element under the cursor with a sibling, (b) removing it entirely. Both should emit boundary events naming a still-attached ancestor as the new target. Hover into either scene, click mutate, watch the event trace.

Pointer Events: in every browser

scene A — swap element under cursor

replaces the target with a new one in the same slot. Boundary events must name the parent, not the detached node.

hover me

scene B — remove element under cursor

removes the target. Engine should fire pointerout / leave on the removed node and pointerover / enter on the nearest still-attached ancestor.

hover me

the behaviour

// scene B — target is the hovered element
target.remove();

// in Chrome 144 (matching Firefox / Safari):
// pointerout    on target,     relatedTarget = ancestor
// pointerleave  on target chain up to common ancestor
// pointerover   on ancestor,   relatedTarget = (detached) target
// pointerenter  on ancestor

see also