如何在JavaScript中检测设备触摸支持？

Question

过去,当检测设备是否支持JavaScript中的触摸事件时,我们可以执行以下操作:

var touch_capable = ('ontouchstart' in document.documentElement);

但是,true即使底层设备不支持触摸事件,Google Chrome(17.x.x +)也会返回上述检查.例如,在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)

这远非理想......

Answer 1

正确的答案是处理两种事件类型 - 它们不是互斥的.

对于更可靠的触摸支持测试,还要查看window.DocumentTouch && document instanceof DocumentTouch哪个是Modernizr使用的测试之一

更好的是,只需自己使用Modernizr并让它为您进行功能检测.

但是请注意,你不能防止误报,因此我的第一线以上-你已经得到了支持两种.

Answer 2

这是对Modernizr如何执行触摸检测的修改,增加了对IE10 +触摸设备的支持.

var isTouchCapable = 'ontouchstart' in window ||
 window.DocumentTouch && document instanceof window.DocumentTouch ||
 navigator.maxTouchPoints > 0 ||
 window.navigator.msMaxTouchPoints > 0;

这并非万无一失,因为检测触摸设备显然是不可能的.

你的旅费可能会改变:

• 较旧的触摸屏设备仅模拟鼠标事件
• 某些浏览器和操作系统设置可能会在未连接触摸屏时启用触摸API
• 在混合鼠标/触摸/触控板/笔/键盘环境中,这并不表示正在使用哪个输入,仅指示浏览器是否敏感 - 仅检测浏览器是否可以接受或模拟触摸输入.例如,用户可以随时从使用鼠标切换到触摸笔记本电脑或鼠标连接的平板电脑上的屏幕.

更新: 提示:不要使用触摸功能检测来控制和指定UI行为,而是使用事件侦听器.点击/触摸/键盘事件的设计,而不是设备,触摸功能检测通常用于节省添加事件监听器的CPU /内存费用.触摸检测可能有用且适当的一个示例:

if (isTouchCapable) {
    document.addEventListener('touchstart', myTouchFunction, false); 
}