如何区分Internet Explorer 10 / Windows Phone 8中的单击和触摸事件

Question

我正在开发一个带有悬停导航的项目。

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

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

我的问题是，两个IE版本（最新的移动和桌面）都会触发“click”事件，以及两个“MSPointerDown”事件，一个是pointerType“touch”，另一个是pointerType“mouse”。 如果动作是真正的触摸事件或由鼠标引起的话，我真的无法理解如何找出，因为两者都被触发了。 我想避免基于媒体查询的解决方案，因为大型触摸屏越来越受欢迎。

Answer 1

我最近遇到了类似的问题。 我最后使用JavaScript而不是：hover伪类添加悬停状态，然后绑定touchstart或click事件以显示子菜单，如果主菜单项没有hover类 。

$(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