Question

我需要找到一种方法来了解用户是否使用了鼠标悬停或触摸点击来显示和隐藏不同的菜单链接。我想做的就是这个。

if(a user used a mouseenter or mouseleave){
       $("li.mobile-show > a").hide();
       $("div.hover-over").hover(function(){
            $(".hover-dropdown", this).children().slideToggle(); 
        });
}
else if(a user used touch click){
        $("li.mobile-show > a").show();     
        $("div.hover-over").click(function(){
            $(".hover-dropdown", this).children().toggle(); 
        });
}

我尝试Modernizr.mq('only all and (min-width: 768px)')看看我是否可以分开桌子和移动设备与计算机屏幕，但它不适用于显示桌面视图但只能使用触摸功能的大型平板电脑设备。帮助〜！

Answer 1

这是一个老麻烦了。不幸的是没有办法。不使用Modernizr，不使用任何东西。

台式机浏览器（至少是大型浏览器）具有ontouchstart（'ontouchstart' in window）和整个 Touch Events API 。
移动浏览器模拟鼠标事件。
基于设备宽度/尺寸做出结论也容易出错：许多平板电脑的宽度为1280、1300和更多像素

一种检测mouseenter vs touch点击的方法？使用Modernizr怎么样？

1 个答案: