Fastclick 解决点击穿透问题

可能有人会想，既然 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元素是一个链接，那此时页面就会意外地跳转。

Vue 移动端项目中安转并且引用

import FastClick from 'fastclick'
FastClick.attach(document.body)