zoukankan      html  css  js  c++  java
  • app中页面滑动,防止a链接误触

    问题

    app中list列表,当我们用手滑动屏幕,屏幕上页面内容会快速滚动,不会因为手已经离开了屏幕而滚动停止,突然手触摸暂停,当手指是在a标签上面时,会跳转链接,这对客户体验及其不好
    

    思路

    先判断滚动事件是否已经停止,当停止之后,再给一定时间的延时,之后的点击才有效。这样的话,当快速滚动之后,第一次点击屏幕,让屏幕滚动停止,第二次点击屏幕,如果是点击了一个a标签才能跳转到其他路由
    

    解决代码

    $(function() {
    //处理 滑动超长list的时候 click页面强行停止页面 可能会触发页面上的a链接
      var count = 0,
        timer = null;
      var oldTop = newTop = $(window).scrollTop();
    
      function log() {
        if (timer) clearTimeout(timer);
        newTop = $(window).scrollTop();
        console.log(++count, oldTop, newTop);
        if (newTop === oldTop) {//页面停止做的操作
          $("a").removeAttr("onclick"); 
          clearTimeout(timer);
        } else {
          oldTop = newTop;
          timer = setTimeout(log, 100); //没效果时,时间可以稍微设置长一些
          $("a").attr("onclick", "return false"); //页面还在滚动中的操作
        }
      }
      $(window).on('touchmove', log);
    });
    
    
  • 相关阅读:
    ZOJ 3818 Pretty Poem
    HDU 4597 Play Game
    HDU 4497 GCD and LCM
    CSU 1335 高桥和低桥
    UVA 10791 Minimum Sum LCM
    CSU 1119 Collecting Coins
    CSU 1120 病毒
    UVA 12169 Disgruntled Judge
    HDU 1301 Jungle Roads
    POJ 1258 Agri-Net
  • 原文地址:https://www.cnblogs.com/raind/p/9814852.html
Copyright © 2011-2022 走看看