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

Question

我曾经依赖

var supportsTouch = 'ontouchstart' in document;

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

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

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

Answer 1

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

长答案:

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

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

所以现在您的测试将再次起作用...但是 - 如果您想要面向 future ，您可能需要改变您的方法。原因如下:

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

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

相反，请查看 PointerEvents API ，它为鼠标、触摸和手写笔输入提供了一个通用的事件接口(interface)。如果您正在考虑为触摸界面等制作更大的按钮，可以使用 pointer media query。 spec 也是(和一个 hover 一个)，它将很快出现在浏览器中 - 这区分了输入设备的不同精度 - none/coarse/fine - 动态将让您根据连接的指针设备调整您的样式，因为它们已连接/断开连接。非常酷。

Modernizr v3.0(将在接下来的几周内删除)将在此处进行一些相关更改:

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

所以我会考虑在可用时使用 PointerEvents(它已经在 IE10 中)，如果不可用则回退到 Modernizr.touchevents 开关。