I've encountered an issue that I'm struggling to find a solution for. My goal is to implement an event delegate using pointermove on a parent container, and I need to be able to detect when the event transitions between a child element and the parent container.
While this approach works smoothly on desktop browsers, I've run into a roadblock with Safari on iOS. It appears that in Safari iOS, the event target remains "stuck" on the initial element where the pointermove was first triggered. As a result, when the pointer crosses over from a child to the parent boundary, the target does not change. Any suggestions or insights on how to resolve this?
Here's a code snippet for reference:
const outer = document.getElementById("outer");
outer.addEventListener("pointermove", (e) => console.log(e.target.id))body {
touch-action: none;
}
#outer {
height: 500px;
width: 500px;
background-color: #AAAAFF;
}
#inner {
height: 200px;
width: 200px;
background-color: #AAFFAA;
}<div id="outer">
<div id="inner">
</div>
</div>