现在Chrome无法通过标准测试，如何测试Touch-Events？ [英] How to test for Touch-Events now that Chrome fails standard tests?

问题描述

我曾经依赖于文档中的

  var supportsTouch ='ontouchstart'; 
  

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

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

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

解决方案

简短回答：但可能并不是永远。

Chrome团队希望由于具有触摸功能的屏幕越来越多的台式机，因此将触摸事件添加到桌面浏览器中。所以他们做到了 - 大约在24岁的时候加那利。然后他们发现大量人正在做你正在做的检测触摸设备。这个问题是你只测试浏览器浏览器支持触摸事件，而不是设备 （同样适用于 Modernizr.touch ）。更具体地说，就是 W3C / Apple TouchEvents API 。

他们不希望将不同版本的Chrome发布为触摸/非触摸，因此他们只是在启动时检测到触摸设备时才启用触摸API（这里讨论： http://code.google.com/p/chromium/issues/detail?id=152149 <所以现在你的测试会再次运行... 但是 - 如果你想要面向未来，你可能会想改变你的方法。原因如下：

1. 并非所有的浏览器都会执行Chrome的这种开关。

$ b $触摸功能正在成为一种动态特性：使用Microsoft Surface等，您可以从键盘和鼠标上拔下电源，并且只需触摸即可，用户可以通过KVM切换器连接触摸显示器，这些显示器在启动时不会被检测到，等等。浏览器供应商不想让API出现和消失 - 这将是一场噩梦 - 所以在某些时候，Chrome家伙可能会永久启用所有设备上的TouchEvents API。这个测试将开始再次抛出误报。




相反，看一下PointerEvents API ，它为鼠标，触摸和手写笔输入提供了一个公共事件接口。如果您正在考虑为触摸界面等制作更大的按钮，还需要指针媒体查询规范（以及一个悬停），它将很快出现在浏览器中 - 这区分了不同的精度 none / coarse / 罚款 - 而且动态可让您根据连接的指针设备调整样式，因为它们已连接/断开连接。非常酷。

Modernizr v3.0（在接下来的几周内下降）在这里会有一些相关的变化：





• 正在添加对PointerEvents API的检测


• Modernizr.touch 正在重命名 Modernizr.touchevents 以更好地表示它的含义






所以我会考虑如果可用的话使用PointerEvents（它已经在IE10中），如果不是，则回落到 Modernizr.touchevents 开关。




I used to rely on

var supportsTouch = 'ontouchstart' in document;

to test for touch support in mobile and desktop browsers. Based on that test I bind eventListeners to click- or touch-events. This works fine in ALL current browser versions but the latest update to Chrome Canary (24.0.1275.0 canary) and of course the DEV version fail this test.

I checked on the current modernizr test but that returns a false positive as well, meaning it states that chrome supports touch even though the feature is disabled.

My current workaround is to test for any kind of mobile browser first and only if that returns positive uses the above test to check for touch. Downside of this is that you cannot use the handy "emulate touch events" option in chrome's dev-tools. Ideas?

解决方案

Short answer: Your test will work again now in any current of Chrome. But probably not forever.

Long answer:

The Chrome team wanted to add touch events into desktop browsers, because of the growing number of desktops with touch-capable screens. So they did - probably around the time of 24.0 Canary. They then found that loads of people were doing what you're doing to "detect touch devices". The problem with this is you're only testing if the browser supports touch events, not the device (same goes for Modernizr.touch). More specifically, just the W3C/Apple TouchEvents API.

They didn't want to ship different versions of Chrome for touch/non-touch, so they made it so they only enable the touch APIs if they detect a touch device on startup (discussed here: http://code.google.com/p/chromium/issues/detail?id=152149).

So now your test will work again... BUT - if you want to future-proof yourself, you might want to change your approach. Here's why:

1. Not all browsers will perform this switch that Chrome does.

2. Touch capability is becoming a dynamic feature: with Microsoft Surface etc you can unplug from keyboard and mouse and go touch-only, users may have touch monitors connected via KVM switches which won't be detected at startup, etc. Browser vendors don't want to make APIs appear and disappear - that'd be a nightmare - so at some point the Chrome guys will probably permanently enable the TouchEvents APIs on all devices. That test will start throwing "false positives" again.

Instead, look at the PointerEvents API, which gives a common event interface for mouse, touch and stylus inputs. If you're thinking of making buttons bigger for touch interfaces etc, there's a pointer media query spec too (and a hover one), which will appear in browsers soon - this differentiates between different accuracies of input devices - none/coarse/fine - and being dynamic will let you adjust your styles based on the connected pointer devices, as they're connected/disconnected. Very cool.

Modernizr v3.0 (dropping within the next few weeks) will have a couple of relevant changes here:

• A detect for the PointerEvents API is being added
• Modernizr.touch is being renamed Modernizr.touchevents to better represent what it means

So I'd consider using PointerEvents if available (which it already is in IE10), falling back to a Modernizr.touchevents switch if not.

这篇关于现在Chrome无法通过标准测试，如何测试Touch-Events？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！