在Javascript/jQuery中,如何检测客户端设备是否有鼠标？
当用户将鼠标悬停在某个项目上时,我有一个可以向上滑动一个小信息面板的网站.我正在使用jQuery.hoverIntent来检测悬停,但这显然不适用于iPhone/iPad/Android等触摸屏设备.所以在那些设备上,我想恢复点击以显示信息面板.
几乎所有当前的浏览器(来自github上的patrickhlauke的详细信息,我在SO答案中总结,以及来自QuirksMode的更多信息),触摸屏触摸触发mouseover事件(有时创建一个隐藏的伪光标,保持用户触摸的位置直到它们触摸其他地方).
有时,在触摸/点击和鼠标悬停用于执行不同操作的情况下,这会导致不良行为.
从响应鼠标悬停事件的函数内部,已经传递了该event对象,有什么方法可以检查这是否是从一个元素外部移动到其内部的移动光标的"真正"鼠标悬停,或者它是否是由触摸屏触摸触摸屏行为引起的？
该event对象看起来相同.例如,在Chrome上,由用户触摸触摸屏引起的鼠标悬停事件已经type: "mouseover"没有任何我可以看到的将其识别为触摸相关的事件.
我有想法将事件绑定到touchstart更改鼠标悬停事件,然后事件将touchend删除此更改.不幸的是,这是行不通的,因为事件顺序似乎touchstart→交通touchend→交通mouseover→交通click(我不能附加正规化,鼠标悬停功能,点击不搞乱其他功能).
我以前曾经问过这个问题,但是现有的问题并没有完全消除它:
我能想到的最好的是有一个设置一些全局访问的变量标志一样,也就是说,一个触摸事件window.touchedRecently = true;上touchstart,但不能点击,再经过消除了这个标志,也就是说,一个500毫秒setTimeout.这是一个丑陋的黑客.
注意 - 我们不能假设触摸屏设备没有类似鼠标的漫游光标,反之亦然,因为有许多设备使用触摸屏和类似鼠标的笔,当在屏幕附近悬停时移动光标,或使用触摸屏和鼠标(例如触摸屏笔记本电脑).我的答案中的更多细节如何检测浏览器是否支持鼠标悬停事件？.
注意#2 - 这不是一个jQuery问题,我的事件来自Raphael.js路径,jQuery不是一个选项,它提供了一个简单的vanilla浏览器event对象.如果有一个Raphael特定的解决方案,我会接受,但这是不太可能的,原始的JavaScript解决方案会更好.
过去,检查鼠标是否存在的最佳方法是寻找触摸事件支持.但是,桌面Chrome现在支持触摸事件,使此测试失败.
有没有办法直接测试鼠标悬停事件支持,而不是根据触摸事件的存在推断它？
解决方案:根据AshleysBrain的回答,这是有效的代码.
jQuery(function()
{
// Has mouse
jQuery("body").one("mousemove", function(e)
{
attachMouseEvents();
});
// Has touchscreen
jQuery("body").one("touchstart", function(e)
{
// Unbind the mouse detector, as this will fire on some touch devices. Touchstart should always fire first.
jQuery("body").unbind("mousemove");
attachTouchEvents();
});
});
在为移动设备调整网页时,我总是依赖于css媒体查询.
最近我不再只担心屏幕尺寸,而且还担心许多移动设备的javascript引擎.一些常见的javascript效果依赖于窗口滚动或快速的DOM转换序列在慢速设备上工作非常糟糕.
有没有办法猜测设备性能,所以我可以启用/禁用在慢速设备上看起来不好的元素？
到目前为止,我只能想到不好的解决方案:
更新:修正了我的问题,专注于一个问题.在评论中,触摸界面问题有一个很好的解决方案.