Changing the DOM hierarchy while handling a "pointerenter" event produces significantly different results across browsers #285
Description
Consider this example (which GitHub wouldn't let me attach):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Changing the DOM hierarchy while handling a pointerenter event</title>
<style>
div {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: black;
}
</style>
<script>
function logEvent(event)
{
console.log(`${event.type}@${event.target.id}`);
if (event.type == "pointerenter" && event.target.id === "top")
event.target.innerText = "";
}
document.addEventListener("DOMContentLoaded", event => {
for (let div of document.querySelectorAll("div")) {
for (let eventType of ["mouseenter", "pointerenter", "mouseleave", "pointerleave"])
div.addEventListener(eventType, logEvent);
}
});
</script>
</head>
<body>
<div id="top"><div id="middle"><div id="bottom"></div></div></div>
</body>
</html>If you move your mouse pointer over the black rectangle, which produces a "pointerevent" event that removes all of its content, the different browsers I've tested dispatch all different events.
Should the Pointer Events and/or UI Events specifications discuss what should happen in this situation?
Safari (ToT build)
- pointerenter@top
- mouseenter@top
- pointerenter@middle
- mouseenter@middle
- pointerenter@bottom
- mouseenter@bottom
- pointerleave@bottom
- mouseleave@bottom
- pointerleave@middle
- mouseleave@middle
- pointerenter@top
- mouseenter@top
Firefox (67.0.1)
- pointerenter@top
- pointerenter@middle
- pointerenter@bottom
- mouseenter@top
- pointerleave@bottom
- pointerleave@middle
- pointerenter@top
Chrome (74.0.3729.169)
- pointerenter@top
- pointerenter@middle
- pointerenter@bottom
- pointerenter@top
- mouseenter@top