<分区>
因此，我在为 Microsoft Surface 开发 Web 应用程序时遇到了一个有趣的问题。
我想在用户与 DOM 元素交互时添加事件监听器。现在我可以:
if ('ontouchstart' in document.documentElement) {
//Attach code for touch event listeners
document.addEventListener("touchstart" myFunc, false);
} else {
//Attach code for mouse event listeners
document.addEventListener("mousedown" myFunc, false);
}
如果设备没有鼠标输入，这个问题就很简单，上面的代码就可以正常工作。但是 Surface(以及许多新的 Windows 8 计算机)同时具有触摸和鼠标输入。所以上面的代码只有在用户触摸设备时才会起作用。永远不会附加鼠标事件监听器。
然后我想，好吧，我可以这样做:
if ('ontouchstart' in document.documentElement) {
//Attach code for touch event listeners
document.addEventListener("touchstart" myFunc, false);
}
//Always attach code for mouse event listeners
document.addEventListener("mousedown" myFunc, false);
不支持触摸的设备不会附加事件，但使用触摸的设备将注册其处理程序。这个问题虽然是myFunc()将在触摸设备上调用两次:
-
myFunc()触发“touchstart”时触发 - 因为触摸浏览器通常会经历 touchstart -> touchmove -> touchend -> mousedown -> mousemove -> mouseup -> click,
myFunc()将在“mousedown”中再次调用
我考虑过将代码添加到 myFunc()这样它就调用e.preventDefault()但这似乎也阻止了某些浏览器上的 touchend 以及 mousedown/mousemove/mouseup (link ).
我讨厌做用户代理嗅探器，但似乎触摸浏览器在触摸事件的实现方式上有所不同。
我一定遗漏了一些东西，因为看起来这些 JavaScript 实现肯定是根据支持鼠标和触摸的浏览器的可能性决定的!