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);
});

猜你喜欢

转载自www.cnblogs.com/raind/p/9814852.html
今日推荐