页面滑动，防止a链接误触

问题

最近在项目中遇到一个非常奇怪的问题，拿出来和大家分享一下。由于文采不好，原因又和这篇文章上描述的差不多，我这边就不组织语言了。直接copy过来了。原文地址

• 1.问题：在移动设备上快速滚动屏幕然后点击使滚动停止，如何尽量避免在点击时误触a标签，跳转到其他页？

• 2.这也是在移动端的前端开发中实际遇到的一个问题，详细说来就是在正常情况下，当我们的当前页面内容较多，高度上较高，出现滚动条的时候，当我们用手滑动屏幕，屏幕上页面内容会快速滚动，不会因为手已经离开了屏幕而滚动停止。这个时候，当我们想要停止滚动的时候，我们也轻轻点击屏幕，让屏幕停止。但是这个时候有个问题，如果屏幕上点击的位置，正好有一个a标签，或者有一个button，这个时候就很容易进入下一个路由。查看了mdn上的关于scroll事件的一些说明，并没有对scroll过程中的速度和停止的反应时间这方面的说明。
  

解决

找了好多文章没有具体的解决方案，后来在一篇文章的启发下，解决了这个问题。贴下代码：

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

原理

原理就是，判断滚动的页面是否还在滚动中，如果滚动那就将点击元素return false禁止点击。反之放开点击操作。我这边好多页面路由跳转用的是a 的href，所以我这么写。大家如果可以用的话，也可以改成其他的标签。
截图： 可以看到滚动中的页面 a标签上会有 禁止点击事件的操作。页面停止后，则删除这个禁止操作。

如果大家有什么更好的意见或者建议欢迎留言我，谢谢各位~