【移动端】300ms延迟以及点透事件原因以及解决方案

产生原因

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

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

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

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

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

点透是什么?

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

点透产生的原因？

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

点透的解决根本方案就是解决300ms延迟的问题

300ms延迟解决方案

【禁用缩放】

既然双击缩放仅对那些可被缩放的页面来说有存在意义，那对于不可缩放的页面，直接去掉点击延迟，何乐而不为呢？这里所说的不可缩放，是指使用了下述标签的页面。

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

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

缺点：你必须完全禁用缩放来达到目的，而从移动端站点的可用性和可访问性来看，缩放是相当关键的一环。你很可能已经遇到过这个问题，即你想要放大一张图片或者一段字体较小的文本，却发现无法完成操作。

【width=device-width】

除了双击缩放的约定外，iPhone 诞生时就有的另一个约定是，在渲染桌面端站点的时候，使用 980 像素的视口宽度，而非设备本身的宽度（iPhone 是 320 像素宽）。

<meta name="viewport" content="width=device-width"> // 告诉浏览器 视口宽度 = 设备宽度

那么设置这个跟300ms有什么关系呢？

在 Chrome 32 这一版中，他们将在包含 width=device-width 或者置为比 viewport 值更小的页面上禁用双击缩放。当然，没有双击缩放就没有 300 毫秒点击延迟。

除了浏览器开发商提供的方案外，还有一个更加通用的方案FastClick

fastClick

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。

【使用】

window.addEventListener( "load", function() {

    FastClick.attach( document.body );

}, false );

attach() 方法虽可在更具体的元素上调用，直接绑定到上可以确保整个应用都能受益。当 FastClick 检测到当前页面使用了基于标签或者 touch-action 属性的解决方案时，会静默退出。可以说，这是真正的跨平台方案出来之前一种很好的变通方案。

【原理】

移动浏览器的事件触发顺序：touchstart -> touchend -> click

FastClick 在检测到 touchend 事件的时候，会通过 DOM 自定义事件立即触发一个模拟 click 事件，并把浏览器在 300 毫秒之后真正触发的 click 事件阻止掉。

小结

由于现在浏览器一直在进步，所以针对自己的开发需求，选择合适的方案。时代在变，技术在变，尤其是这种因为浏览器所导致的bug，每一个时期的解决方案是不一致的。具体也可以看看fastClick README.md 中有这么一段话。

As of late 2015 most mobile browsers - notably Chrome and Safari - no longer have a 300ms touch delay, so fastclick offers no benefit on newer browsers, and risks introducing bugs into your application. Consider carefully whether you really need to use it.

截至2015年底，大多数移动浏览器——尤其是Chrome和Safari——不再有300ms的触摸延迟，因此，在较新的浏览器上，fastclick没有任何好处，而且可能会给应用程序带来bug。仔细考虑是否真的需要使用它。