在过去,当检测设备是否支持JavaScript中的触摸事件时,我们可以这样做:
var touch_capable = ('ontouchstart' in document.documentElement);
但是,Google Chrome(17.x.x+)会为上述检查返回true
,即使底层设备不支持触摸事件。例如,在Windows 7上运行上述代码将返回true,因此如果我们将其与以下内容结合使用:
var start_evt = (touch_capable) ? 'ontouchstart' : 'onmousedown';
在Google Chrome上,由于我们绑定到ontouchstart
,因此该事件永远不会触发。简而言之,有没有人知道一个可靠的方法来规避这一点?我正在执行以下检查:
var touch_capable = ('ontouchstart' in document.documentElement && navigator.userAgent.toLowerCase().indexOf('chrome') == -1)
离理想还差得远。。
4条答案
按热度按时间xzv2uavs1#
正确的答案是处理 * 两种 * 事件类型--它们并不互斥。
要获得更可靠的触摸支持测试,还可以查找
window.DocumentTouch && document instanceof DocumentTouch
,它是Modernizr使用的测试之一更好的是,你自己使用Modernizr,让它为你做特征检测。
请注意,您无法防止误报,因此我上面的第一行-您必须支持两者。
nvbavucw2#
这是Modernizr执行触摸检测的方式的修改,增加了对IE10+触摸设备的支持。
从detecting a touch device is apparently an impossibility开始就不是万无一失了。
您的里程数可能会有所不同:
**更新:**提示:不要使用触摸功能检测来控制和指定UI行为,use event listeners instead。针对点击/触摸/按键事件而不是设备进行设计,触摸功能检测通常用于保存添加事件侦听器的cpu/内存开销。触摸检测可能有用且合适的一个示例:
而且...奖金,你可以通过运行下面的代码片段在浏览器中测试此代码。
n9vozmp43#
您应该考虑使用经过良好测试(和跨浏览器)的Modernizr触摸测试。
http://modernizr.github.com/Modernizr/touch.html
tyu7yeag4#
好吧,这是个老问题了,但是必须在没有库的情况下完成这项工作,我创建了以下解决方案--简单地让事件自己说话--当您看到
touch
事件时,只需禁用mouse
事件的处理。在coffescript中是这样的;
它们只是为
touchstart
、move
和end
定义了包含实际逻辑的函数。