[英]mouseover sometimes fires instead of touchstart - why?
我发现了一个非常奇怪的行为，我无法解释。 想要做以下事情：
处理程序需要对touchstart 或 mouseover事件做出反应，具体取决于输入设备的类型。 请注意，我想支持混合设备（鼠标和触摸屏），我不能依赖指针事件。
现在，我只设置了touchstart和mouseover事件。 在大多数情况下，它的工作正常。 还可以使用preventDefault来禁止触摸事件后触发的模拟“鼠标”事件。 但是对我来说完全令人困惑的是， 有时候还会发生一个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>
我对你的例子进行了一些调整，这似乎是Chrome中的一个错误。 我无法在Firefox中重现它。 您可以在桌面上的Chrome开发人员工具中重现它，事实上我已经找到了在100％的情况下重现它的方法：
因此，当触摸中心位于矩形之外时，似乎会发生这种情况，但触摸的半径与矩形重叠。 也就是说，除了提交错误报告之外，我不确定你能做什么
鼠标事件（mouseover，mouseout，mousedown，mouseup，mousemove等）特定于鼠标输入设备。
mouseover javascript事件将转换为touchenter触摸事件。 这个事件是W3C草案的一部分（目前只是Firefox支持），所以如果你想使用它，你必须使用touchmove事件实现你的onmouseover功能并查看坐标并查看它们是否与你的html坐标重叠元件。
我认为这会对你有所帮助。
为什么在触发 touchstart 事件时 setTimeout 游戏循环会出现延迟？
[英]Why is setTimeout game loop experiencing lag when touchstart event fires?
为什么这个 Javascript 插件在手机上使用“touchstart”而不是“click”事件
[英]Why this Javascript plugin use 'touchstart' instead of 'click' event for mobiles
响应式网站：为什么需要touchstart而不是click？
[英]Responsive website: why would touchstart be needed instead of click?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.