移动端解决点击300ms延迟问题

版权声明：仅供个人学习使用，如有雷同，纯属巧合。 https://blog.csdn.net/erdfty/article/details/89703581

在页面中加上如下代码： 

    <!-- 下面这段Js是为了解决移动端点击300ms延迟问题 -->
    <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
    <script>
      if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function() {
          FastClick.attach(document.body);
        }, false);
      }
      if(!window.Promise) {
        document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
      }
    </script>

这样就能够有效的解决了~

 

移动端的 click 有300 ms的延时原因：

在移动端触发时间会按照 touchstart，touchmove，touchend，click 顺序触发；触发touchend，click之间会有200-400不等的时间延时（因为移动端需要判断用户是不是想要进行双击）；
fastclick 和 zepto 的tap 事件 都可以解决 300 ms延时；
fastclick 原理：是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。
tap 原理：在touchstart 时会记录一个值x1，y1，在touchend时会记录x2，y2，通过对比着几个值，判断用户是否是点击事件，而不是滑动事件，然后直接触发事件；
注意：fastclick 在ios 上会影响元素自动触发，比如 直接click()；会拦截第一次，需要执行两次click()；才会触发；安卓上不需要；