移动端点击与点击穿透

移动端click事件的300ms延迟

由于移动端会有双击缩放的这个操作，因此浏览器在click之后要等待300ms，看用户有没有下一次点击，也就是这次操作是不是双击。

解决方案：

• 浏览器开发商
  如果在meta中设置了禁止缩放：

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scaleble = no" />

表明这个页面是不可缩放的，那双击缩放的功能就没有意义了，此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。
但是这种方案的缺点就是必须完全禁用缩放，而我们想禁用的只有双击缩放这个操作。

另外，如果更改了视口的默认宽度：

<meta name="viewport" content="width=device-width"/>

如果设置了上述meta标签，那浏览器就可以认为该网站已经对移动端做过了适配和优化，就无需双击缩放操作了。这种方案比较适合，因为它没有完全禁用缩放，而是禁用了浏览器默认的双击缩放行为。

• 使用touchstart、touchend等事件模拟click
  很多库如zepto都会提供tap事件，用于移动端的click。这种tap事件一般都是使用touchstart、touchmove、touchend来模拟一次click。

点击穿透

点击穿透的场景：上层元素A绑定了tap事件，下层元素B绑定了click事件。当我们点击A时，A元素隐藏，此时也会触发下层B元素的click事件。

原因就是当上层A的tap事件发生后，其实是touchend结束后，会触发click事件，因为这几个事件的触发顺序是touchstart-touchmove-touchend-click。因此当click事件触发300ms后，上面的A元素已经消失，此时真正点击的就相当于下层的B元素，因此会发生点击穿透事件。

解决方案：

• 都使用click事件或者都是用tap事件
• 在click事件触发前阻止它。比如在touchend事件中使用e.preventDefault()来阻止后续的click事件。
• 使用fastclick库。fastclick是一个专门解决300ms点击延迟的库。