移动端延迟300ms的原因以及解决方案

一、前言

移动端浏览器提供一个特殊的功能：双击(double tap)缩放。

二、移动端延迟300ms的原因

为什么要用触摸事件？触摸事件是移动端浏览器特有的html5事件。

因为移动端的click有很大延迟（大约300ms），300ms延迟来自判断双击和长按，因为只有默认等待时间结束以确定没有后续动作发生时，才会触发click事件。而触摸事件的延迟则是非常短的，使用触摸事件的能够提高页面响应速度，带来更好的用户体验。

重点：由于移动端会有双击缩放的这个操作，因此浏览器在click之后要等待300ms，看用户有没有下一次点击，也就是这次操作是不是双击。

三、浏览器开发商的解决方案

1、方案一：禁用缩放

当HTML文档头部包含如下meta标签时：

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

表明这个页面是不可缩放的，那双击缩放的功能就没有意义了，此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。

缺点：就是必须通过完全禁用缩放来达到去掉点击延迟的目的，然而完全禁用缩放并不是我们的初衷，我们只是想禁掉默认的双击缩放行为，这样就不用等待300ms来判断当前操作是否是双击。但是通常情况下，我们还是希望页面能通过双指缩放来进行缩放操作，比如放大一张图片，放大一段很小的文字。

2、方案二：更改默认的视口窗口

为了让桌面站点能在移动端浏览器正常显示，移动端浏览器默认的视口宽度！=设备浏览器视窗宽度，而是视口宽度要比设备宽度大，通常是980px。

我们可以通过以下标签来设置视口宽度为设备宽度。

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

对移动端坐过适配和优化了，这个时候就不需要双击缩放了。如果能够识别出一个网站是响应式的网站，那么移动端浏览器就可以自动禁掉默认的双击缩放行为并且去掉300ms的点击延迟。如果设置了上述meta标签，那浏览器就可以认为该网站已经对移动端做过了适配和优化，就无需双击缩放操作了。

这个方案相比方案一的好处在于，它没有完全禁用缩放，而只是禁用了浏览器默认的双击缩放行为，但用户仍然可以通过双指缩放操作来缩放页面。

除了IE之外的大部分浏览器都不支持这个新的CSS属性。touch-action这个CSS属性。这个属性指定了相应元素上能够触发的用户代理（也就是浏览器）的默认行为。如果将该属性值设置为touch-action: none，那么表示在该元素上的操作不会触发用户代理的任何默认行为，就无需进行300ms的延迟判断。

四、代码解决方案

1、方案一：指针事件polyfill

除了IE，其他大部分浏览器都还不支持指针事件。有一些JS库，可以让我们提前使用指针事件。比如：

（1）谷歌的Polymer

（2）微软的HandJS

（3）@Rich-Harris 的 Points

关心的不是指针事件，而是与300ms延迟相关的CSS属性touch-action。由于除了IE之外的大部分浏览器都不支持这个新的CSS属性，所以这些指针事件的polyfill必须通过某种方式去模拟支持这个属性。一种方案是JS去请求解析所有的样式表，另一种方案是将touch-action作为html标签的属性。


2、方案二：FastClick

FastClick是FT Labs专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。

五、点击穿透问题

说完移动端点击300ms延迟的问题，还不得不提一下移动端点击穿透的问题。既然click点击有300ms的延迟，那对于触摸屏，我们直接监听touchstart事件不就好了吗？

使用touchstart去代替click事件有两个不好的地方。

第一：touchstart是手指触摸屏幕就触发，有时候用户只是想滑动屏幕，却触发了touchstart事件，这不是我们想要的结果；

第二：使用touchstart事件在某些场景下可能会出现点击穿透的现象。

1、什么是点击穿透？

假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。

这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。

2、点击穿透现象3种情况

（1）点击穿透问题：点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件。

（2）跨页面点击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转因为 a标签跳转默认是click事件触发 ，所以原理和上面的完全相同

（3）点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应位置元素的click事件被触发了。

3、解决方案

2种思路：

（1）不要混用touch和click。既然touch之后300ms会触发click，只用touch或者只用click就自然不会存在问题了。

（2）用掉（或者说是消费掉）touch之后的click。依旧用tap，只是在可能发生点击穿透的情形做额外的处理，拿个东西来挡住、或者tap后延迟350毫秒再隐藏mask、pointer-events、在下面元素的事件处理器里做检测（配合全局flag）

详细方案：

（1）只用touch

最简单的解决方案，完美解决点击穿透问题。

把页面内所有click全部换成touch事件 touchstart 、’touchend’、’tap’， 需要特别注意 a标签，a标签的href也是click，需要去掉换成js控制的跳转，或者直接改成span + tap控制跳转。

（2）只用click

下下策 ，因为会带来300ms延迟，页面内任何一个自定义交互都将增加300毫秒延迟，想想都慢。不用touch就不会存在touch之后300ms触发click的问题。

（3）拿个东西挡住

比较笨的方法， 千万不要用。更多信息请查看 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

（4）tap后延迟350ms再隐藏mask

改动最小，缺点是隐藏mask变慢了，350ms还是能感觉到慢的。

（5）pointer-events

比较麻烦且有缺陷， 不建议使用。mask隐藏后，给按钮下面元素添上 pointer-events: none; 样式，让click穿过去，350ms后去掉这个样式，恢复响应。缺陷是mask消失后的的350ms内，用户可以看到按钮下面的元素点着没反应，如果用户手速很快的话一定会发现。

（6）在下面元素的事件处理器里做检测（配合全局flag）

比较麻烦， 不建议使用。全局flag记录按钮点击的位置（坐标点），在下面元素的事件处理器里判断event的坐标点，如果相同则是那个可恶的click，拒绝响应。

（7）fastclick

好用的解决方案，不介意多加载几KB的话， 不建议使用 ，因为有人遇到了bug，更多信息请查看： Fastclick 导致click事件触发两次的问题。

首先引入fastclick库，再把页面内所有touch事件都换成click，其实稍微有点麻烦，建议引入这几KB就为了解决点透问题不值得，不如用第一种方法呢。

六、浏览器事件触发的顺序

touchstart --> mouseover(有的浏览器没有实现) --> mousemove(一次) -->mousedown --> mouseup --> click -->touchend

Touch 事件中，常用的为 touchstart, touchmove, touchend 三种。除此之外还有touchcancel。 注意，原生事件中并没有tap事件。

事件描述如下：

而Touch事件的触发一般通过手指，还会存在多点触控，拖拽方向等情况。列出几个重要参数如下：

代码获取如下：

elemenrRef.addEventListener('touchstart', function(e) {   
    console.log(e.touches, e.targetTouches, e.changedTouches);}
);

手指触发触摸事件的过程如下：

touchstart --> mouseover(有的浏览器没有实现) --> mousemove(一次) -->mousedown --> mouseup --> click -->touchend

由此，我们可以在 ontouchstart 事件上记录开始触摸开始，ontouchend 记录触摸结束信息。 通过上述这些参数，很容易的去计算幽冥点击的时间，以及点击穿透的相关信息，包括响应的坐标情况。