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);
    });
    
    
  • 相关阅读:
    mysql数据库
    Python中socket编程
    Python中logging模块
    Python中的多进程
    Python中并发、多线程等
    Python模块化
    Python中异常处理
    KafKa入门
    kafka入门:简介、使用场景、设计原理、主要配置及集群搭建(转)
    第一节 MongoDB介绍及下载与安装
  • 原文地址:https://www.cnblogs.com/raind/p/9814852.html
Copyright © 2011-2022 走看看