mouseover有时会触发而不是touchstart - 为什么？
fro*_*dev 12 javascript events touch
我发现了一个非常奇怪的行为,我无法解释.想要做以下事情:
处理程序需要对一个touchstart 或 一个mouseover事件作出反应,具体取决于输入设备的类型.请注意,我想支持混合设备(鼠标和触摸屏),我不能依赖指针事件.
现在,我只是设置了两个touchstart和mouseover事件.在大多数情况下,它的工作正常.还用于preventDefault禁止触摸事件后触发的模拟"鼠标"事件.但是对我来说完全令人困惑的是,有时会mouseover发生一个事件,如果我删除了preventDefault,它甚至可能mouseover会触发而不是 a 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% 的情况下重现它的方法：
- 打开开发工具并切换到设备模式
- 将圆形光标放在红色矩形的边缘，使光标中心位于红色矩形之外
对图像质量感到抱歉，我无法通过屏幕截图捕获此光标 - 点击
- 为了让它下次工作，您必须首先单击远离红色矩形的黑色背景
因此，当触摸的中心位于矩形之外，但触摸的半径与矩形重叠时，似乎会发生这种情况。也就是说，我不确定除了提交错误报告之外你还能做什么