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

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

chen发布于 今天 03:35

问题描述

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

// 执行业务逻辑

})

方法三: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 () {

    // 业务处理

    })

javascript前端移动端web

阅读 30更新于 今天 04:02

本作品系原创,采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议

avatar

chen

1 声望

0 粉丝

0 条评论

得票时间

avatar

chen

1 声望

0 粉丝

宣传栏

问题描述

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

// 执行业务逻辑

})

方法三: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 () {

    // 业务处理

    })

以上是 【JS】移动端click事件300ms延时解决方案 的全部内容, 来源链接: www.h5w3.com/114348.html

回到顶部