How to get "Pointermove" delegation to work in Safari iOS on parent/child?

Question

I've run into a problem and haven't been able to find a workaround yet. I'm trying to use an event delegate with "pointermove" on a parent container and I want to know when the event crosses from a child to the parent container and vice versa.

This works well on desktop browsers, but when I try in Safari iOS it seems like the event target gets "stuck" on whatever first started the pointermove. When the pointermove crosses to the parent/child boundary the target doesn't change. Any ideas?

Example code:

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>

I searched for a while and found no answers until just now. Apparently this has been a thing for a _long_ time. This looks like the workaround: https://stackoverflow.com/questions/3918842/how-to-find-out-the-actual-event-target-of-touchmove-javascript-event — mikepk, Nov 17 '20 at 19:02

score 0 · Accepted Answer · answered Nov 17 '20 at 21:15

Looks like this has been an issue for a long time. Touchmove works the same way as Pointermove which is why I wasn't seeing results for this question. Here's another stack overflow post with the workaround which is to use document.elementFromPoint like e.g.:

const outer = document.getElementById("outer");
outer.addEventListener("pointermove", (e) => {
    actualTarget = document.elementFromPoint(e.clientX, e.clientY);
    console.log(actualTarget.id);
})

How to get "Pointermove" delegation to work in Safari iOS on parent/child?

1 Answers1