既然 Chrome 未能通过标准测试，如何测试触摸事件？

Question

我以前靠

var supportsTouch = 'ontouchstart' in document;

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

我检查了当前的 modernizr 测试，但它也返回了误报，这意味着它表明即使禁用该功能，chrome 也支持触摸。

我目前的解决方法是首先测试任何类型的移动浏览器，并且只有当返回肯定时才使用上述测试来检查触摸。这样做的缺点是您不能在 chrome 的开发工具中使用方便的“模拟触摸事件”选项。想法？

Answer 1

简短回答：您的测试现在可以在任何当前的 Chrome 中再次运行。但可能不会永远。

长答案：

Chrome 团队希望将触摸事件添加到桌面浏览器中，因为越来越多的桌面具有可触摸的屏幕。所以他们做到了——可能是在 Canary 24.0 左右的时候。然后他们发现很多人都在做你正在做的事情来“检测触摸设备”。这样做的问题是您只是在测试 浏览器 是否支持触摸事件，而不是 设备（Modernizr.touch 也是如此）。更具体地说，就是W3C/Apple TouchEvents API。

他们不想为触摸/非触摸提供不同版本的 Chrome，所以他们做到了，只有在启动时检测到触摸设备时才启用触摸 API（在此处讨论：http://code.google.com/p/chromium/issues/detail?id=152149）。

所以现在您的测试将再次起作用... 但是 - 如果您想为自己的未来做准备，您可能需要改变您的方法。原因如下：

1. 并非所有浏览器都会像 Chrome 那样执行此切换。

2. 触控功能正在成为一项动态功能：使用 Microsoft Surface 等，您可以从键盘和鼠标中拔出并只进行触控，用户可能通过 KVM 开关连接了触控显示器，在启动时不会被检测到等. 浏览器供应商不想让 API 出现和消失——那将是一场噩梦——所以在某些时候，Chrome 家伙可能会在所有设备上永久启用 TouchEvents API。该测试将再次开始抛出“误报”。

相反，请查看PointerEvents API，它为鼠标、触摸和触控笔输入提供了一个通用事件接口。如果您正在考虑为触摸界面等制作更大的按钮，那么还有一个 pointer media query 规范（和一个 hover 规范），它将很快出现在浏览器中 - 这可以区分不同的准确度输入设备 - none/coarse/fine - 动态将允许您根据连接的指针设备调整样式，因为它们已连接/断开。很酷。

Modernizr v3.0（在接下来的几周内发布）将在此处进行一些相关更改：

• 正在添加对 PointerEvents API 的检测
• Modernizr.touch 更名为 Modernizr.touchevents 以更好地表达其含义

所以我会考虑在可用的情况下使用 PointerEvents（它已经在 IE10 中），如果没有，则回退到 Modernizr.touchevents 开关。