解决移动端click事件的300ms延时

岳泽以

发布于 2022-10-26 17:26:53

7300

发布于 2022-10-26 17:26:53

文章被收录于专栏：岳泽以博客

移动端click事件会有300ms延时，原因是移动端屏幕双击会缩放页面。

三种解决方案如下：

1.禁用缩放，浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟

<meta name="viewport" content="user-scalable=no">

2.利用 touch 事件自己封装这个事件解决 300ms 延迟。

原理就是：

当我们手指触摸屏幕，记录当前触摸时间
当我们手指离开屏幕，用离开的时间减去触摸的时间
如果时间小于 150ms，并且没有滑动过屏幕，那么我们就定义为点击

//封装tap,解决click300ms延时
function tap(obj, callback) {
  var isMove = false;
  var startTime = 0;
  obj.addEventListener("touchstart", function (e) {
    startTime = Date.now(); //记录触摸时间
  });
  obj.addEventListener("touchmove", function (e) {
    isMove = true; //看是否有滑动，有滑动算拖拽，不算点击
  });
  obj.addEventListener('touchend',function(e){
    if(!isMove&&(Date.now()=startTime)<150){//如果手指触摸和离开时间小于150ms 算点击
        callback&&callback();//执行回调函数
    }
    isMove=false;//取反 重置
    startTime=0;
  });
}
//调用
tap(div,function(){ })

3.使用插件，fastclick 插件解决 300m 延迟

js 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用，如轮播图和瀑布流插件。特点：它一般为了解决某个问题而专门存在，其功能单一，并且比较小。

fastclick 插件解决 300ms 延迟，使用延时。

Github 官网地址：https://github.com/ftlabs/fastclick

使用方法：

引入 fastclick 插件文件：

<script src="fastclick.js"></script>

在 HTML 中使用：

 <script>
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function () {
                FastClick.attach(document.body);
            }, false);
        }
        var div = document.querySelector('div');
        div.addEventListener('click', function () {
            alert(11);
        })
    </script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022 年 09 月，如有侵权请联系 cloudcommunity@tencent.com 删除

click