关于javascript:移动端click事件300ms延时解决方案

2次阅读

共计 885 个字符，预计需要花费 3 分钟才能阅读完成。

挪动端因为屏幕双击会缩放页面，因而挪动端 click 事件会有 300ms 延时状况的产生

办法一：全局禁止缩放

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

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

该办法会让浏览器禁用默认的双击行为并且去掉 300ms 点击延时
实用场景：须要对整个页面进行禁用双击行为。然而个别不罕用。

办法二：封装 tap 函数解决 300ms 提早

原理
1. 当手指触摸屏幕，记录以后触摸工夫
2. 当手指来到屏幕，用来到工夫减去触摸工夫
3. 如果工夫小于 150ms，并且没有滑动过屏幕，那么将这行为近似作为点击事件来解决，并实现相应的点击处理函数
实现代码

    /**
     * 封装 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 () {// 执行业务逻辑})

正文完