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

Posted chen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端click事件300ms延时解决方案相关的知识,希望对你有一定的参考价值。

问题描述

移动端由于屏幕双击会缩放页面,因此移动端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 () {
        // 业务处理
    })

以上是关于移动端click事件300ms延时解决方案的主要内容,如果未能解决你的问题,请参考以下文章

click 延时解决方案

fastclick.js --- 解决移动端点击事件300ms延时

解决click事件300ms延迟

web移动端_移动端的左右手势以及tap事件(解决移动端点击时出现的300ms毫秒延时问题)

移动端延迟300ms的原因以及解决方案

解决click事件在移动端操作延迟300ms问题和点击时穿透问题