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

Question

我发现了一个我无法解释的非常奇怪的行为。想要执行以下操作：

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

现在，我只设置了 touchstart 和 mouseover 事件。在大多数情况下，它工作得很好。还可以使用 preventDefault 来禁止在触摸事件后触发模拟的 "mouse" 事件。但是让我完全困惑的是有时仍然有一个 mouseover 事件发生，如果我删除 preventDefault，它甚至似乎 mouseover 而不是 touchstart。为什么哦为什么会这样？

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

我准备了一个小测试用例，大家可以自己试试。请注意，此行为似乎仅在您点击红色 DIV（具有事件）和背景之间的边界上的某处时触发。只需轻敲中心即可 100% 工作。在它发生之前，您可能需要或多或少的尝试。

非常感谢任何帮助！

<!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>

Answer 1

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

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

我觉得对你有帮助。

Answer 2

我仔细研究了您的示例，它似乎是 Chrome 中的错误。我无法在 Firefox 中重现它。您可以在桌面上的 Chrome 开发人员工具中重现它，事实上我已经找到了一种在 100% 的情况下重现它的方法：

打开开发工具并切换到设备模式
将圆形光标放在红色矩形的边缘，使光标中心位于红色矩形之外抱歉画质不好，我无法用截图捕捉到这个光标
点击
要使其下次正常工作，您必须先单击远离红色矩形的黑色背景

所以当触摸的中心在矩形之外，但触摸的半径与矩形重叠时，似乎会发生这种情况。也就是说，除了提交错误报告外，我不确定您可以在这里做什么

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

mouseover sometimes fires instead of touchstart - why?

javascript

events

touch