移动端点击事件300ms延迟问题解决方案——fastclick.js

 　　

　　移动端点击事件300ms延迟的问题由来已久，如下截图

　　

　　下面截图来自原文：https://www.jianshu.com/p/6e2b68a93c88

　

　　网上关于300ms延迟问题的解决方法，大致分为 3 种

　　①：使用 meta viewport 属性禁用缩放，并让视口宽度等于设备宽度

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

　　

　　②：使用 touch-action:none;  这句代码的意思是 禁止触发默认的手势操作

　　　　个人不推荐这个方法，之前写过一篇博客，因使用了该属性后踩的坑

　　　　详见：https://www.cnblogs.com/tu-0718/p/7411907.html

　  

　　③：使用FastClick.js库

　　　　  FastClick是专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。

　　　　  FastClick的实现原理是在检测到touchend事件的时候

　　　　会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉

 

　　个人推荐 FastClick.js ，下面简述一下使用方法以及注意事项

　   　　①：首先引入 FastClick.js 文件

　　　   ②：调用 FastClick.attach() 方法，调用该方法的写法有 3 种 ，如下

　　　　js

　　　　window.onload = function() {
                FastClick.attach(document.body);    
            }

　　　　if('addEventListener' in document) {
                document.addEventListener('DOMContentLoaded', function() {   
                    FastClick.attach(document.body);                        
                });
                 
            }

　　　　jquery

　　$(function() {
        FastClick.attach(document.body);
    });

　　注：引用了 Fastclick.js 后，JS就只能用 addEventListener 绑定事件，而不能直接用 element.click 的方式添加事件

　　　　否则可能会出现点击事件不触发，或触发以后不执行方法

　　 这样是可以的

　　　　element.addEventListener('click', function() {
                element.className = 'tu-mask';
                element.style.display = "block";
            });

　　这样就不行了

　　　　element.click = function() {
                element.className = 'tu-mask';
                element.style.display = "block";
            }