乐趣区

关于javascript:移动端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 () {// 执行业务逻辑})
退出移动版