fastclick解决移动端click事件延迟300ms和点击穿透

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第23天，点击查看活动详情

前言

在开发webApp和移动端的时候，常常遇到移动端点击响应慢的问题，因此查找各方资料，整理解决方案加以记录

1. 移动端click事件存在300ms延迟

   为什么？ 由于浏览器双击缩放机制的设定，点击一次无法判断是否需要打开某一链接，因此需要等待300ms.

   解决：使用fastclick 1、安装

   npm install fastclick
   

   2、 不同使用方式 全局html

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

   2.1、vue main.js全局域

   import fastClick from 'fastclick';
   fastClick.attach(document.body);
   

   2.2、jquery

   <script type="text/javascript" src='https://cdn.bootcdn.net/ajax/libs/fastclick/1.0.6/fastclick.js'></script>
   

   $(function() {
   	FastClick.attach(document.body);
   });
   

   2.3、js

   if ('addEventListener' in document) {
   	document.addEventListener('DOMContentLoaded', function() {
   		FastClick.attach(document.body);
   	}, false);
   }
   

2. 点击穿透 既然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元素是一个链接，那此时页面就会意外地跳转。