如何區分Internet Explorer 10中的點擊和觸摸事件/ Windows Phone 8

我正在使用懸停式導航進行項目。如何區分Internet Explorer 10中的點擊和觸摸事件/ Windows Phone 8

由於支持觸摸的設備的特性，它們並不真正支持懸停。對於iOS和Android，我設法禁用所有懸停效果，並通過設置正確的CSS屬性的「touchstart」事件來模擬它們。這像一個魅力。如果它是一個「觸發」事件，它是一個移動設備，否則可能是一個桌面。

不幸的是，Internet Explorer實現了自己的事件，即「MSPointerDown」等。

我的問題是，兩個IE版本（最新的移動和桌面）觸發一個「點擊」事件，以及兩個「MSPointerDown」事件，一個與指針類型「觸摸」，一個與指針類型「鼠標」。如果這個動作是一個真實的觸摸事件或者是由鼠標引起的，那麼我真的不能將自己的頭部包裹起來，因爲兩者都被觸發了。我想避免基於媒體查詢的解決方案，因爲大型觸摸屏越來越受歡迎。

來源

2013-04-09 Dennis Timmermann

你試過MSGestureStart（http://msdn.microsoft.com/en-us/library/ie/hh771898(v=vs.85).aspx）？ – zvona 2013-04-09 11:10:05

我最近碰到類似的問題。我最終添加了懸停狀態而不是：hover僞類，然後綁定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'); 
     } 
    });  
});

檢查我創建的這個快速codepen。

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

來源

2016-09-28 11:25:04

我現在才注意到這是三年前發佈的。我會保留這個答案僅供參考。 – 2016-09-28 11:33:32

如何區分Internet Explorer 10中的點擊和觸摸事件/ Windows Phone 8

回答

相關問題