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

时间:2022-02-04 23:44:29

  

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

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

  下面截图来自原文: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";
}