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

Posted 2021-10-06 chen

问题描述

移动端由于屏幕双击会缩放页面，因此移动端click事件会有300ms延时情况的产生

解决方案

方法一：全局禁止缩放

1. 在html页面头部的meta标签中加上content="user-scalable=no"

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

1. 该方法会让浏览器禁用默认的双击行为并且去掉300ms点击延时
2. 适用场景：需要对整个页面进行禁用双击行为。但是一般不常用。

方法二：封装tap函数解决300ms延迟

1. 原理

   1. 当手指触摸屏幕，记录当前触摸时间
   2. 当手指离开屏幕，用离开时间减去触摸时间
   3. 如果时间小于150ms，并且没有滑动过屏幕，那么将这行为近似作为点击事件来处理，并完成相应的点击处理函数
2. 实现代码

    /**
     * 封装tap 解决移动端click事件300ms延时问题
     * @param obj 监听对象
     * @param callback 执行的函数
     */
    function tap(obj,callback) {
    // 判断是否滑动的标志位
    var isMove = false;
    // 记录触摸开始时间
    var startTime = 0;
    // 开始触摸 记录开始触摸时间
    obj.addEventListener(\'touchstart\',function (e) {
        startTime = Date.now();
    })

    // 开始滑动 改变滑动标志位 有滑动 算拖拽 不算点击
    obj.addEventListener(\'touchmove\',function () {
        isMove = true;
    })

    // 手指离开屏幕
    obj.addEventListener(\'touchend\',function () {
        // 如果为滑动事件 则直接掠过  如果不是滑动事件且 时间小于150ms则认为是点击操作 将执行点击业务逻辑，也即回调函数callback()
        if (isMove && (Date.now() - startTime < 150)) {
        // 如果有回调函数 则执行回调函数中的业务逻辑
            callback && callback();
        }
        // 重置标志位
        isMove = false;
        startTime = 0;
    })
}

// 调用
    tap(div,function () {
        // 执行业务逻辑
    })

3.使用弊端：每个元素都需要调用该函数，如果存在上百个页面元素，则需要调用一百次该事件，非常不方便

方法三：fastclick插件

1. 作用：解决移动端click事件300ms延时问题
2. 使用好处：一个代码便解决所有页面元素click300ms延时问题，之后便可以正常写元素click事件
3. github官网地址点击此处.

4. 用法

   1. 下载fastclick.js文件
   2. 引入fastclick.js文件
   3. 使用

    // 消除所有元素click延时
   if (\'addEventListener\' in document) {
       document.addEventListener(\'DOMContentLoaded\', function() {
           FastClick.attach(document.body);
       }, false);
   }
   
   // 当使用click事件时 不会再有300ms延时
   div.addEventListener(\'click\',function () {
       // 业务处理
   })