如何區分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