zoukankan      html  css  js  c++  java
  • 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 延迟。

       

  • 相关阅读:
    UVa 1451 Average (斜率优化)
    POJ 1160 Post Office (四边形不等式优化DP)
    HDU 3507 Print Article (斜率DP)
    LightOJ 1427 Substring Frequency (II) (AC自动机)
    UVa 10245 The Closest Pair Problem (分治)
    POJ 1741 Tree (树分治)
    HDU 3487 Play with Chain (Splay)
    POJ 2828 Buy Tickets (线段树)
    HDU 3723 Delta Wave (高精度+calelan数)
    UVa 1625 Color Length (DP)
  • 原文地址:https://www.cnblogs.com/llanq123/p/13779808.html
Copyright © 2011-2022 走看看