谈一谈移动端300ms点击延迟

有时候我们会发现，用手机浏览网站的时候，点击之后总会有一些小小的延迟，才能触发我们想要的点击效果。

原因：浏览器要进行一次缩放判断，如果你是快速的双击，就应该去缩放页面，顾会有300ms延迟来进行该判断。

具体原因：在很久很久以前，智能手机刚出现的时候，大多数网站还都没有移动化，但是人们在手机浏览器上还是可以访问到网站的。于是由于手机的屏幕十分小，浏览到的页面会变得十分小。（为了可访问性，浏览器厂商默认把viewpoint视口的宽度设置为了980px，也有部分不太相同的。为的是强行把网站缩放到手机屏幕可以全部浏览。理解这个地方还需要对虚拟像素、物理像素和视口的一些知识，可以百度得到）于是就缩放页面就成了一个很重要的需求，毕竟没有人乐意看十分小的字。于是就造成了这个双击缩放的事件，随之带来了300ms延迟的响应。

现状：如今智能手机越来越普及了，很多网站都做了响应式适配或者为移动端开发了m站，专门适配手机，也就使缩放显得不是十分有必要了，而300ms的延迟还是会在一定程度上影响客户体验。

移动端点击事件基本知识
点击事件触发的顺序 touchstart -> touchend -> mousedown -> mouseup -> click
在touchstart和touchend中使用preventDefault()方法可以取消点击事件，同时也会取消对表单的focus事件
在mousedown mouseup mousemove中调用preventDefault()方法并不能取消click事件

解决办法及其优劣
1.设置<meta name="viewport" content="user-scalable=no" />
既然是双击缩放的锅，那么我们直接禁止用户缩放，自然也就咩有了300ms延迟。但是缺点也很明显，即阻止了双击缩放，也阻止了两个手指的缩放，再有这个需求的时候显得很尴尬
2.设置<meta name="viewport" content="width=device-width, initial-scale=1">
较高级的浏览器都会在看到这个meta标签的时候都会移除300ms的点击判断。
缺点大概就是如果你需要兼容很低版本的浏览器，最好先测试一下这个标签能不能有效果，因为真的很少浏览器在设置这个标签后还会有300ms的点击延迟
3.使用zepto的tap事件
从原理上说是监听touchstart和touchend 在结束的时候模拟一个tap事件并触发他，来获得与touchend同时相应的效果。
会有点透的问题（这个问题可以百度google一下，不详细说了）就是因为并没有做事件的取消，导致上层tap后，300ms过后点击事件作用在了下层元素上。
并且不利于做移动pc端的统一，需要给两个端绑定不同的事件，比较麻烦
4.使用fastclick库
从原理上说也是监听touchstart和touchend事件，在结束的时候模拟一个click事件并立即触发他，同时取消300ms后应该触发的click事件。
这个库很棒，但是会增加项目体积。也会出现一些focus事件上的小bug。

fastclick源码
网上已经有了许多fastclick的源码注释，喜欢看的可以自行研究一下(还是可以学到一些api和一些有趣的bug及对点击事件处理有更加好的认识)。该库的整体思路也已经在上面说过了，也做了很多兼容性的处理。不过这个库已经很久没更新了，按照我现在的测试结果来看库里的对是否需要fastclick检验已经没有再更新了（例如ios的一些系统已经可以用meta标签来避免300ms的延迟
github官网上说的并不是很全面，通过看源码与自己测试得出以下情况并不需要fastclick

• chrome系列 版本 >= 32 并设置了meta标签的安卓 || 其他系统的chrome
• 黑莓 版本>= 10 并设置了meta标签
• IE10 设置了-ms-touch-action: none or manipulation
• IE11 设置了touch-action: none or manipulation
• 火狐 版本>=27 并设置了meta标签
• IOS 测试了较高版本的IOS都没有什么问题（自己测试的，源码里认为IOS设备都需要fastclick）

最后的建议
如果不需要兼容很低的浏览器，尽量使用meta标签来解决，很完美没有什么副作用，不用引库体积也小。