3

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

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

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

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

4

1 回答 1

0

我最近遇到了类似的问题。我最终使用 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');
       }
   });    
});

检查我创建的这个快速代码笔。

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

于 2016-09-28T11:25:04.583 回答