Question

我发现了一个我无法解释的非常奇怪的行为。想要做以下事情：

处理程序需要对touchstart 或 mouseover事件作出反应，具体取决于输入设备的类型。请注意，我想支持混合设备（鼠标和触摸屏），我不能依赖指针事件。

现在，我只设置了touchstart和mouseover个事件。在大多数情况下，它的工作正常。同时使用preventDefault禁止模拟＆＃34;鼠标＆＃34;触摸事件后触发事件。但是对我来说完全令人困惑的是有时还有一个mouseover事件发生，如果我删除了preventDefault，它甚至似乎mouseover正在触发<一个touchstart的强>相反。为什么会发生这种情况呢？

此外，Android和iOS都可以重现！虽然它似乎更容易用Android触发（使用Chrome）。

我准备了一个小测试盒，所以你可以尝试自己。请注意，只有在红色DIV（具有事件）和背景之间的边界上的某个位置点击时，才会触发此行为。只需点击中心即可100％工作。在发生这种情况之前，您可能需要或多或少的尝试。

任何帮助都非常感谢！

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Touchtest</title>
  <style>
    body {
      background: #222;
      color: white;
      position: relative;
      font-size: .9em;
      font-family: Arial, Helvetica, sans-serif;
    }
    #test {
      position: fixed;
      top: 100px;
      right: 100px;
      bottom: 100px;
      left: 100px;
      background: red;
    }
  </style>
</head>

<body>
  <div id="test"></div>
  <script type="text/javascript">
    function testEvent(event) {
      console.log("testEvent", event);
      if (event.type === "mouseover") {
        alert("MOUSEOVER DETECTED");
      }
      event.preventDefault();
    }

    var ele = document.getElementById("test");
    ele.addEventListener("touchstart", testEvent);
    ele.addEventListener("mouseover", testEvent);
  </script>
</body>

</html>

＆＃13;

Answer 1

我对你的例子进行了一些调整，这似乎是Chrome中的一个错误。我无法在Firefox中重现它。您可以在桌面上的Chrome开发者工具中重现它，事实上我已经找到了在100％的情况下重现它的方法：

打开开发工具并切换到设备模式
将圆形光标放在红色矩形的边缘上，使光标的中心位于红色矩形的外面抱歉图像质量，我无法使用屏幕截图
点击
下次要它工作，你必须先点击远离红色矩形的黑色背景

因此，当触摸中心位于矩形之外时，似乎会发生这种情况，但触摸的半径与矩形重叠。也就是说，除了提交错误报告之外，我不确定你能做什么

Answer 2

鼠标事件（mouseover，mouseout，mousedown，mouseup，mousemove等）特定于鼠标输入设备。

mouseover javascript事件将转换为touchenter触摸事件。这个事件是W3C草案的一部分（目前只是Firefox支持），所以如果你想使用它，你必须使用touchmove事件实现你的onmouseover功能并查看坐标并查看它们是否与你的html坐标重叠元件。

我认为这有助于你。

mouseover有时会触发而不是touchstart - 为什么？

2 个答案: