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

问题描述

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

解决方案

方法一：全局禁止缩放

1. 在html页面头部的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 () {
        // 执行业务逻辑
    })