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

1 问题

移动端浏览器点击事件通常有300ms的延时，随着用户体验要求增高，300ms的点击延时越来越难以忍受。

2 原因

因为手机屏幕小，所有做了双击缩放，手机浏览器为了判断用户是单击还是双击就添加了300ms的延时处理。

3 解决办法(建议用)

3.1 禁用缩放

HTML文档头部包含如下meta标签

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

3.2 更改默认的视口宽度

移动端浏览器默认的视口宽度并不等于设备浏览器视窗宽度，而是要比设备浏览器视窗宽度大，通常是980px。我们可以通过以下标签来设置视口宽度为设备宽度。

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

3.3 CSS touch-action

touch-action: none

3.4 引入fastclick方法 https://github.com/ftlabs/fastclick

3.4.1 原理

该方法在检测到touchend事件后，会触发自己模拟的click事件

3.4.2 引用和调用

<script src='fastclick.js'></script>
<script>
  if('addEventListener' in document){
    document.addEventListener('DOMContentLoaded', function(){
      FastClick.attach(document.body);
    }, false)
  }
</script>

4 补充

现在浏览器厂商已经做了处理，300ms已缩减至88ms，后续还会更少