微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript – 忽略jQuery hover(mouseenter,mouseleave)在触摸设备上

既没有鼠标也没有指针,悬停屏幕元素的概念并不适用于触摸设备.许多网站依赖于 JavaScript悬停事件导航或其他目的,一些触摸设备1实现鼠标点击一次点击即可触发.如果一个事件处理程序也绑定到该点击,这只会在元素上的第二个点击上提出.

由于jQuery的hover()函数在内部使用mouseenter和mouseleave,所以与hover()和click()注册的元素需要两个抽头才能触发后者2.对于很多用例,这正是你想要发生的事情.然而,在hover()处理仅将重点(工具提示,发光等)添加到悬停元素的应用程序中,跳过所有事件的触摸设备可能会更有意义,并将其转到onclick处理程序.

我知道如何专门聆听touchstate和touchend事件,让我量身定制触控用户体验.这是我问题的有效解决方案,但我希望这可能是一个“更容易”的方式.我想象的是一个类似于它的签名中的hover()的方法,只有这样一种方式才能将提供的事件处理程序附加在非触摸设备上.

jQuery有这样的方法吗?任何插件?还是我忽略了这里的东西?

1行为在iPad,iPhone和几款Android手机上得到证实.

2
在桌面vs触摸设备上运行这个JsFiddle demo,看看我在说什么.

解决方法

我建议使用Modernizr来检测设备的触感,只是不绑定悬停处理程序,除非html元素具有“no-touch”类:

$('selector').click(...)
$('.no-touch selector').hover(...)

查看http://jsfiddle.net/juYf8/17/

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐