js移动端点击后延迟怎么办？

深碍√TFBOYSˉ_ 2023-06-18 14:56 23阅读 0赞

移动端页面对于点击事件会有300毫秒的延迟，也就是js捕获click事件的回调函数处理，需要300ms后才生效，导致多数用户感觉移动设备上基于HTML的web英语解密响应速度慢，甚至有时候会影响一些业务逻辑的处理

## 为什么会存在延迟？ ##

移动端浏览器为什么会设置300毫秒的等待时间呢？这与双击缩放的方案有关。平时我们有可能已经注意到了，**双击缩放，即用手指在屏幕快速点击两次，可以看到内容或者图片放大****，再次双击，浏览器会将网页缩放至原始比例**

**浏览器捕获第一次单击后，会先等待一段时间，如果在这段时间区间里用户未进行下一次点击，则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作，则浏览器会做双击事件处理。**这段时间就是上面提到的300毫秒延迟。

如何避免延迟？

方法一：静止缩放（部分苹果手机还是不行）

方法二：fastclick.js

*    第一步：在页面中引入fastclick.js文件。  npm下载 
    
        npm install fastclick
    
     
 *    第二步：在js文件中添加以下代码  
          在 window load 事件之后，在body上调用FastClick.attach()即可。
 *      if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        }
    
     如果你项目使用了JQuery，就将上面的代码改写成：
 *      $(function() {    
            FastClick.attach(document.body);    
        });

使用needsclick过滤特定的元素

如果页面上有一些特定的元素不需要使用fastclick来立刻触发点击事件，可以在元素的class上添加needsclick:

<a class="needsclick">Ignored by FastClick</a>

不需要使用fastclick的情况

以下这几种情况是不需要使用fastclick：

1、FastClick是不会对PC浏览器添加监听事件  
2、Android版Chrome 32+浏览器，如果设置viewport meta的值为width=device-width，这种情况下浏览器会马上出发点击事件，不会延迟300毫秒。

3、所有版本的Android Chrome浏览器，如果设置viewport meta的值有user-scalable=no，浏览器也是会马上出发点击事件。  
4、IE11+浏览器设置了css的属性touch-action: manipulation，它会在某些标签（a，button等）禁止双击事件，IE10的为-ms-touch-action: manipulation

也感谢这个作者[https://www.jianshu.com/p/150c305f6930][https_www.jianshu.com_p_150c305f6930]

[https_www.jianshu.com_p_150c305f6930]: https://www.jianshu.com/p/150c305f6930