目标元素边缘的 Touchstart 导致 mousedown

Question

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

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

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

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

Answer 1

Edge 不支持触​​摸事件。 所以 touchstart 什么都不做，并且 preventDefault 永远不会被调用，所以 mousedown 被执行。 您可以改用指针事件，并使用 PEP 为 chrome 和其他浏览器进行 polyfill。

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

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

Answer 2

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

我还提交了关于铬错误跟踪器的错误。