html5 – 如何测试触摸事件现在Chrome无法进行标准测试？

我以前依靠

var supportsTouch = 'ontouchstart' in document;

测试移动和桌面浏览器中的触摸支持.基于该测试,我将eventListeners绑定到点击或触摸事件.这在所有当前的浏览器版本中都可以正常工作,但最新的Chrome Canary(24.0.1275.0金丝雀)更新,当然DEV版本也不能通过此测试.

我检查了当前的modernizr测试,但也返回一个假阳性,这意味着它说,即使功能被禁用,chrome支持触摸.

我目前的解决方法是首先测试任何类型的移动浏览器,只有当返回正面使用上述测试来检查触摸.不利之处在于,您不能在chrome的开发工具中使用方便的“模拟触摸事件”选项.想法？

解决方法

简短的答案：您的测试现在可以在任何现有的Chrome中工作.但可能不是永远的

长答案：

Chrome团队希望将触摸事件添加到桌面浏览器中,因为具有触摸屏幕的桌面数量不断增加.所以他们这样做 – 大概在24.0金丝雀的时候.然后他们发现,大量的人正在做你正在做的“检测触摸设备”.这个问题是您只是测试浏览器是否支持触摸事件,而不是设备(对于Modernizr.touch也是如此).更具体来说,就是W3C/Apple TouchEvents API.

他们不希望为触摸/不触摸而运送不同版本的Chrome,因此他们只能在启动时检测到触摸设备时启用触摸API(在此讨论：http://code.google.com/p/chromium/issues/detail?id=152149).

所以现在你的测试会再次工作,但是 – 如果你想要面向未来,你可能想改变你的方法.这就是为什么：

>并不是所有的浏览器都会执行Chrome的切换.
>触摸功能正在成为一个动态的功能：使用Microsoft Surface等,您可以从键盘和鼠标拔下鼠标,然后单击触摸,用户可能会有通过KVM切换器连接的触摸显示器,在启动时不会被检测到.浏览器厂商不要不想让API出现并消失 – 这将是一个噩梦 – 所以在某些时候,Chrome家伙可能会永久启用所有设备上的TouchEvents API.该测试将开始再次投掷“假阳性”.

相反,请查看PointerEvents API,它为鼠标,触摸和手写笔输入提供了一个常见的事件界面.如果您正在考虑使按钮更大的触摸界面等,还有一个pointer media query规格(和一个hover),这将出现在浏览器很快 – 这区分不同的准确性的输入设备 – 无/粗/细 – 动态将让您根据连接的指针设备调整您的样式,因为它们已连接/断开连接.很酷.

Modernizr v3.0(在接下来的几周内下降)将在这里有几个相关的更改：

>正在添加PointerEvents API的检测
Modernizr.touch被更名为Modernizr.touchevents,以更好地代表它的意思

所以我会考虑使用PointerEvents(如果它已经在IE10中),如果没有,请回到Modernizr.touchevents开关.

原文地址：https://www.jb51.cc/html5/168206.html