Как отличить события нажатия и касания в Internet Explorer 10/Windows Phone 8

Question

Я работаю над проектом с навигацией по навигации.

В связи с природой устройств с сенсорным управлением наведение на них не поддерживается. Для iOS и Android я смог отключить все зависающие эффекты и имитировать их через событие «touchstart», которое устанавливает правильные свойства css. Это работает как шарм. Если это событие «touchstart», это мобильное устройство, в противном случае это, вероятно, рабочий стол.

К сожалению, Internet Explorer реализует свои собственные события, а именно «MSPointerDown» и тому подобное.

Проблема заключается в том, что обе версии IE (новейшие мобильные и настольные) запускают событие «щелчок», а также два события «MSPointerDown», одно с «touch» с указателемType, с указателем «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