click 延时解决方案

1.click 延时解决方案

移动端 click 事件会有 300ms 的延时,原因是移动端屏幕双击会缩放(double tap to zoom) 页面。

解决方案:

1. 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。

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

2.利用touch事件自己封装这个事件解决300ms 延迟。

原理就是:

  1. 当我们手指触摸屏幕,记录当前触摸时间

  2. 当我们手指离开屏幕, 用离开的时间减去触摸的时间

  3. 如果时间小于150ms,并且没有滑动过屏幕, 那么我们就定义为点击

代码如下:

//封装tap,解决click 300ms 延时
function tap (obj, callback) {
       var isMove = false;
       var startTime = 0; // 记录触摸时候的时间变量
       obj.addEventListener('touchstart', function (e) {
           startTime = Date.now(); // 记录触摸时间
      });
       obj.addEventListener('touchmove', function (e) {
           isMove = true;  // 看看是否有滑动,有滑动算拖拽,不算点击
      });
       obj.addEventListener('touchend', function (e) {
           if (!isMove && (Date.now() - startTime) < 150) {  // 如果手指触摸和离开时间小于150ms 算点击
               callback && callback(); // 执行回调函数
          }
           isMove = false;  // 取反 重置
           startTime = 0;
      });
}
//调用  
 tap(div, function(){   // 执行代码 });
  1. 使用插件。fastclick 插件解决300ms 延迟。

     

posted @ 2020-10-07 23:18  清出于兰  阅读(375)  评论(0编辑  收藏  举报