javascript - Internet Explorer 10/Windows Phone 8 如何区分点击和触摸事件

Question

我正在从事一个带有悬停导航的项目。

由于触控设备的特性，它们并不真正支持悬停。对于 iOS 和 android，我设法禁用所有悬停效果并通过设置正确的 css 属性的“touchstart”事件模拟它们。这就像一个魅力。如果是“touchstart”事件，则它是移动设备，否则可能是桌面设备。

不幸的是，Internet Explorer 实现了它自己的事件，即“MSPointerDown”等。

我的问题是，两个 IE 版本(最新的移动版和桌面版)都会触发一个“点击”事件，以及两个“MSPointerDown”事件，一个是指针类型“触摸”，一个是指针类型“鼠标”。我真的不知道如何找出该 Action 是真正的触摸事件还是由鼠标引起的，因为两者都被触发了。我想避免基于媒体查询的解决方案，因为大触摸屏越来越受欢迎。

Answer 1

我最近遇到了类似的问题。我最终使用 JavaScript 而不是 :hover 伪类添加悬停状态，然后绑定(bind) touchstart 或 click 事件以在主菜单项没有悬停类 。

$(document).ready(function(){
    var $menuItem = $( '.menu__item' );

    $menuItem.on( 'mouseenter', function(){
        $(this).addClass( 'hover' );
    });

    $menuItem.on( 'mouseleave', function(){
        $(this).removeClass( 'hover' );
    });

   // For touch devices
   $menuItem.on( 'click', function(e) {
       if ( !$(this).hasClass( 'hover' ) ) {
           $(this).addClass('hover');
       }
   });    
});

检查我创建的这个快速代码笔。

http://codepen.io/aspjg/pen/zKzEQV