移动端之点击穿透、300ms 延迟

点击穿透

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

点击穿透现象：

1. 点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click。

2. 事件跨页面点击穿透问题：如果按钮下面恰好是一个有 href 属性的 a 标签，那么页面就会发生跳转。

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

点击穿透解决方案：

1. 只用 touch：把页面内所有 click 全部换成 touch 事件（ touchstart 、touchend、tap ）。最简单的解决方案，完美解决点击穿透问题。

2. 只用 click，下下策，因为会带来 300ms 延迟，页面内任何一个自定义交互都将增加 300ms 延迟。

3. tap 后延迟 350ms 再隐藏 mask：改动最小，缺点是隐藏 mask 变慢了。

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

300ms 延迟

假如用户在浏览器里点击了一个链接，由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，浏览器就等待 300ms，以判断用户是否再次点击了屏幕。也就是说，当我们点击页面的时候移动端浏览器并不是立即做出反应，而是会等一小会才会出现点击的效果。

300ms 延迟解决方案：

1. 禁用缩放，在 HTML 文档头部加 meta 标签如下：

2. 更改默认的视口宽度（响应式布局，消除了站点上可能存在的双击缩放请求）

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

4. FastClick 为解决移动端浏览器 300ms 延迟开发了一个轻量级的库