目标元素边缘的触摸启动会导致鼠标按下

Touchstart on the edge of target element causes mousedown

本文关键字：鼠标启动元素边缘触摸目标更新时间：2023-09-26

我注意到一个非常奇怪的行为，也许是一个错误。我有一个带有锚点和分隔符的垂直菜单。定位点具有用于mousedown、touchstart、pointerdown 的自定义事件处理程序。问题是，当我点击并且手指同时覆盖锚点和分隔符时（分隔符被覆盖得更多），然后执行mousedown事件而不是touchstart。我设法在一个简单的样本中重现了它。

我在Android Chrome和桌面上使用Chrome开发工具触摸仿真对其进行了测试。只需触摸锚点和分隔符之间的区域，您就会看到浏览器注册了mousedown事件而不是touchstart事件。有人可以告诉我出了什么问题吗？是错误还是我做错了什么？

这只发生在锚点上，如果有段落而不是锚点，它就不会发生。

下面是示例：http://jsbin.com/huhariluva/edit?js,console,output

Edge 不支持触摸事件。因此，touchstart 什么都不做，并且从不调用 preventDefault，因此会执行鼠标关闭。您可以改用指针事件，并使用 PEP 为 chrome 和其他浏览器填充代码。

指针事件：https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent

PEP： https://github.com/jquery/PEP

我设法克服了这个问题。解决方案是将 touchstart 事件侦听器添加到另一个被单击并导致错误的元素并从那里调用 event.preventDefault（）。

我还在铬错误跟踪器上提交了错误。