过去, 移动端浏览器对于touchend和click事件添加了300-350毫秒的延迟, 以检测用户是否要执行两次点击.

移除300毫秒延迟

从安卓设备第一个版本的Chrome开始, 如果用户禁用捏合双指缩放, 该延迟就不会生效. 然而捏合双指缩放是个重要的辅助特性. 在Chrome 32(2014年的版本)中, 为了使站点在移动端有更好的体验, 浏览器添加了移除300毫秒延迟的功能, 不过捏合双指缩放依然可用. Firefox和IE/Edge很快在这之后也做出了同样的实现, safari则在2016年3月的ios9.3中实现.

这样的改变对用户体验来说是极大的提升, 关于用户动作响应时间与web性能的关系详见: introduction to RAIL

想要移除300-350毫秒延迟, 只需在HTML的<head>标签中添加以下标签:

1
<meta name="viewport" content="width=device-width">

以上标签将视窗宽度设置为与设备宽度相同, 对于移动端优化的站点, 是最佳实践. 如果添加了这部分标签, 在移动设备上, 浏览器会优化文本的可读性, 也不再需要捏合双指缩放, 此时点击就不会有延迟.

如果无法添加上述标签, 可以使用touch-action: manipulation达到上述效果, 可以在整个页面添加, 也可以在某个元素上添加. 

1
2
3
html {
  touch-action: manipulation;
}

不过Firefox不支持touch-action: manipulation, 因此添加<meta>标签是更好的方式.

无法执行捏合双指缩放是否对可用性造成影响

并不会, 捏合双指缩放依然可用, 操作系统会提供相类似的功能. 在安卓设备上, 可以使用Magnification gestures(放大手势).

适配旧版浏览器

FT Labs的FastClick库捕捉touch事件, 就不会延迟触发, 同时还移除了两次点击手势. 该库通过对比触发touchstart事件时屏幕上的手指个数以及触发touchend事件时屏幕上的手指个数以区分滑动和点击.

不过添加touchstart事件处理器会对性能有所影响, 类似滑动等底层的交互会因调用该事件处理器被延迟, 因为要检查事件默认行为是否被禁用(event.preventDefault()). 不过FastClick库内部做了一些实现, 在浏览器没有300毫秒延迟时, 不会添加touch事件处理器.

参考