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

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

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

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

Моя проблема в том, что обе версии IE (новейшая мобильная и настольная) запускают событие «щелчок», а также два события «MSPointerDown», одно с указателем «касание», другое с указателем «мышь». Я действительно не могу понять, как узнать, было ли действие реальным событием касания или вызвано мышью, поскольку оба они запускаются. Я хотел избежать решения, основанного на медиа-запросах, поскольку большие сенсорные экраны становятся все более популярными.


javascript click touch touchstart
person Dennis Timmermann    schedule 09.04.2013    source источник
comment
Пробовали ли вы MSGestureStart (msdn.microsoft. com/en-us/library/ie/hh771898(v=vs.85).aspx)?   -  person Samuli Hakoniemi    schedule 09.04.2013

Ответы (1)


arrow_upward
0
arrow_downward

Недавно я столкнулся с похожей проблемой. В итоге я добавил состояние наведения с помощью JavaScript вместо псевдокласса :hover, а затем привязал либо событие touchstart, либо событие щелчка, чтобы открыть подменю, если элемент главного меню не имеет класса наведения.

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

person João Guerreiro    schedule 28.09.2016
comment
Я только сейчас заметил, что это было опубликовано три года назад. Я сохраню этот ответ только для справки. - person João Guerreiro; 28.09.2016