5步解决移动设备上的300ms点击延迟【译】【转载】

大多数基于触摸的浏览器设备，在点击时都会有个 300ms 的事件触发等待时间，做过 web app 开发的同学应该都遇到过这个情况，通过下面的5步可以轻松搞定这个延迟。虽然解决方法网上早就出来了，但是看到这篇文章是还是忍不住想翻译分享出来,系统地给大家一个解决思路.

这个 300ms 为什么会被设计出来呢? 原因在于单击后面还有个双击缩放动作，这个涉及到触摸设备的手势交互行为原生设计，在平台提供商比如苹果和 google ,本意是通过 300ms 来区分两者之间的不同行为,单击一次等待 300ms 后没有再次单击那么就会触发缩放等双击行为。本意是好的,正常的逻辑实现,但是在现实的应用场景中,用户往往会觉得 web app 的事件触发不是那么灵敏,有那么一点延迟，那么我们如何避开这个特殊的300ms呢.

1、不要太纠结于此
是否能接受这 300ms 的时间延迟，往往取决于你的应用和目标受众，比如：如果是个内容为主，并且菜单较少的应用，那么用户在阅读上花费的事件远远大于在菜单上消耗的事件，这种情况下 300ms 是完全可以接受的，并且没有 300ms 延迟的体验并不会好很多。分析你的应用判断是否需要解决这个不是问题的问题，在做正确抉择。

2、禁用缩放 （chrome 和 firefox）
在 chrome 和 firefox 的移动版本中，如果禁用了页面缩放，那么着 300ms 的延迟就会自动消失，具体代码如下：

<meta name="viewport" content="width=device-width, user-scalable=no">

或

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

但是这一方案在 safari 上并不起作用，还会降低有视觉或运动障碍用户的可访问性。

3、设置 viewport 的 device-width （chrome 32+）
在 chrome 32+ 中，如果设置了 viewport 的宽度小于或等于物理设备的宽度，那么也会达到禁用缩放的效果。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3">

注意：这里的最大缩放比与上面meta中的值并不一致，这个是关键点。

4、使用指针事件 （IE10+）

微软已经针对触摸问题发布了具体的规范，例如：在你滚屏的时候 pointerup 事件并不会被触发。

这儿有一个非标准的 CSS 触摸 action 属性，它允许你移除特定元素或整个文档的触发延迟，而无需禁用缩放：

a, button, .myelements {
    -ms-touch-action: manipulation; /* IE10  */
    touch-action: manipulation;     /* IE11+ */
}

5、使用 touchend 事件处理
不同于 click 和 touchstart,touchend 没有这个 300ms 的延迟,而是即时触发,你完全可以在 WebGL 或 canvase 游戏中进行实践,但是在web 页面中单单使用 touchend 并不一定靠谱.

1、如果用户在两个不同元素之间触发了 touchstart 和touchend，那么 click 不会被触发 .

2、如果用户触发了 touchstart,但是在touchend之前是一个长长的 touchmove 滚动, 那么 click 也不会被触发.

3、在站点上任然应该保留 click 事件以兼容那些非触摸设备,这是你就要考虑事件的重复触发问题.

在此处输入内容已有同行为我们封装了部分解决方法：

1、FastClick 来至于FT实验室的一个插件，仅仅只有10kb，但是能解决上面的2-4步.

2、Tappy 来自于Filament Group，仅仅1kb，概念上类似于上面的指针事件.

问题：当你为多个元素进行这些事件绑定时，有可能出现性能的损耗.

是否有完美的解决方案呢？

是否需要解决 300ms 在于自己的判断，300ms被设计出来是有特定的用途，上面的meta属性中进行了设定，在chrome和firefox下能起作用，希望其他厂商也能尽快提供这类支持。touch-action: manipulation 这个css属性能把风险降到最低，虽然现在只有微软支持，但是作为W3C规范和HTML5test的一部分，因此也许我们并不需要等待太久。