javascript - Firefox 中 touchstart 处理程序的 preventDefault() 不起作用 - 纯 Javascript

Question

我想要一个按钮来响应触摸屏上的“触摸”，以及非触摸屏上的“点击”。在触摸屏的情况下，我只希望 touchstart 处理程序引导我的流程并防止系统进一步处理点击事件。

为此，我向我的按钮添加了两个事件监听器。一个监听 touchstart 事件。一旦检测到 touchstart，它就会使用 event.preventDefault() 取消点击事件。

Chrome、Opera 和 Android 浏览器触摸屏上的以下代码实现了预期的结果:
- 一个提示说“触摸”。

但是，尽管在 touchstart 处理程序中使用了 preventDefault()，但在 Firefox 中，这两个事件都会被检测到:
两个警报...第一个说“触摸”，然后是第二个说“点击”的警报。

lginButton.addEventListener('touchstart', function(event) {
  event.preventDefault();
  alert("touch");
}, false);

lginButton.addEventListener('click', function(event) {
  alert("click");
}, false);

为什么会发生这种情况，我如何才能在所有浏览器中获得预期的结果？

Answer 1

我目前无法测试。但根据您的反馈，Firefox 似乎实际上并未遵循发现的事件规范 here .我正要在 Mozilla 上找到 4-5 个讨论这个主题的错误日志，最后在这里找到了一个解决问题的日志 https://bugzilla.mozilla.org/show_bug.cgi?id=977226 .绝对检查以确保您拥有当前版本的 firefox。如果你这样做，可能值得在 mozilla 上打开一个新的 bug。同时，您可以在 touchstart 事件处理程序中设置一个条件，以检测事件类型并以不同方式处理触摸和鼠标事件。然后在您单击条件中进一步添加更多条件以处理浏览器和操作系统版本。这是非常糟糕的做法，但会让你继续前进，直到实现补丁。