首页 文章

在使用触摸和鼠标的设备上聆听mousedown和touchstart（例如Surface）[重复]

提问于
浏览 次
11

这个问题在这里已有答案：

因此，我在处理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() 将在触摸设备上调用两次：

当引发"touchstart"时

  • myFunc() 将触发

  • 因为触摸浏览器通常会经历循环touchstart - > touchmove - > touchend - > mousedown - > mousemove - > mouseup - > click， myFunc() 将再次在"mousedown"中调用

我已经考虑过将代码添加到 myFunc() ，这样它就会调用 e.preventDefault() 但是这似乎也阻止了某些浏览器上的touchend以及mousedown / mousemove / mouseup（link） .

我讨厌使用useragent嗅探器，但似乎触摸浏览器在触摸事件的实现方式上有变化 .

我必须遗漏一些东西，因为看起来肯定这些JavaScript实现决定了浏览器支持鼠标和触摸的可能性！

javascript windows-8 touch

3 回答

  • -3

    对于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 .

    回复于
  • 0

    在myFunc中，检查事件类型 . 如果它是touchstart，那么请 e.stopPropagation() .

    function myFunc(e) {
    if (e.type === 'touchstart') {
        e.stopPropagation();
    }
    //the rest of your code here
}
    回复于
  • 2

    EDITED: 如果你使用jQuery，你可以这样做：

    var clickEventType=((document.ontouchstart!==null)?'mousedown':'touchstart');

$("a").bind(clickEventType, function() {
    //Do something
});

    这将仅触发bind的一个事件 .

    在此处找到：How to bind 'touchstart' and 'click' events but not respond to both?

    回复于

相关问题