如何让“Pointermove”委托在父母/孩子的Safari iOS中工作？

Posted 2023-02-23

【中文标题】如何让“Pointermove”委托在父母/孩子的Safari iOS中工作？

【英文标题】：How to get "Pointermove" delegation to work in Safari iOS on parent/child?

【发布时间】：2020-11-17 18:46:42

【问题描述】：

我遇到了问题，还没有找到解决方法。我正在尝试在父容器上使用带有“pointermove”的事件委托，我想知道事件何时从子容器交叉到父容器，反之亦然。

这在桌面浏览器上运行良好，但是当我在 Safari ios 中尝试时，事件目标似乎“卡在”第一次启动指针移动的任何地方。当指针移动越过父/子边界时，目标不会改变。有什么想法吗？

示例代码：

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>

【问题讨论】：

我应该提到我的测试是使用 ios 14.0.2

我搜索了一段时间，直到现在才找到答案。显然，这已经是很长时间的事情了。这看起来像解决方法：***.com/questions/3918842/…

【参考方案1】：

看起来这个问题已经存在很长时间了。 Touchmove 的工作方式与 Pointermove 相同，这就是为什么我没有看到这个问题的结果。这是another stack overflow post，解决方法是使用document.elementFromPoint，例如：

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