参见英文答案 >
How to bind ‘touchstart’ and ‘click’ events but not respond to both?33
所以,在Microsoft Surface的Web应用程序工作时遇到一个有趣的问题.
所以,在Microsoft Surface的Web应用程序工作时遇到一个有趣的问题.
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()将在触摸设备上被调用两次：
>“touchstart”引发时,myFunc()将触发
>因为触摸浏览器通常会经历周期touchstart – > touchmove – > touchend – > mousedown – > mousemove – > mouseup – >点击,myFunc()将再次被调用在“mousedown”
我考虑过添加代码tomyFunc(),以便它调用e.preventDefault(),但这似乎也阻止touchend以及mousedown / mousemove / mouseup在某些浏览器(link).
我讨厌做用户嗅探器,但似乎触摸浏览器在触摸事件的实现方面有变化.
我必须缺少一些东西,因为这似乎确实这些JavaScript实现是由浏览器支持鼠标和触摸的可能性决定的！
解决方法
对于Windows 8,您可以使用“MSPointerDown”事件.
if (window.navigator.msPointerEnabled) {
document.addEventListener("MSPointerDown" myFunc,false);
}
还添加以下您的风格：
html {
-ms-touch-action: none; /* Direct all pointer events to JavaScript code. */
}
有关更多信息,请参阅http://msdn.microsoft.com/en-us/library/ie/hh673557(v=vs.85).aspx.
