移动端的300ms延迟和点击穿透

移动端300ms延迟：假定这么一个场景。用户在 浏览器里边点击了一个连接。因为用户能够进行双击缩放或者双击滚动的操做，当用户一次点击屏幕以后，浏览器并不能马上判断用户是确实要打开这个连接，仍是想要进行双击操做。所以，浏览器 就等待 300 毫秒，以判断用户是否再次点击了屏幕。也就是说，当咱们点击页面的时候移动端浏览器并非当即做出反应，而是会等上一小会儿才会出现点击的效果。

点击穿透：假如页面上有两个元素A和B。B元素在A元素之上。咱们在B元素的touchstart事件上注册了一个回调函数，该回调函数的做用是隐藏B元素。咱们发现，当咱们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。这是由于在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏以后，隔了300ms，浏览器触发了click事件，可是此时B元素不见了，因此该事件被派发到了A元素身上。若是A元素是一个连接，那此时页面就会意外地跳转。

300ms延迟解决方案：
(1) 禁用缩放，在html文档头部加meta标签以下：
<meta name=”viewport” content=”user-scalable=no”/>

(2) 更改默认的视口宽度 （响应式布局，消除了站点上可能存在的双击绽开的请求）
<meta name=”viewport” content=”width=device-width”/>

(3) Css touch-action
touch-action:none;在该元素上的操做不会触发用户代理的任何行为，无需进行3000ms延迟判断。

(4) FastClick为解决移动端浏览器300毫秒延迟开发的一个轻量级的库
点击穿透解决方案：
（1）只用touch
（2）只用click
（3）tap后延迟350ms再隐藏mask
（4）pointer-events