javascript - 在移动设备上快速滚动屏幕然后点击使滚动停止，如何尽量避免在点击时误触<a>标签，跳转到其他页？

问题描述

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

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

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

问题解答

你们产品要求这么苛刻吗，我感觉这不应该成为问题，应该遵循这样的物理逻辑，我是没见过哪个产品规避了这个逻辑。如果非要解决，你的思路是可行的，那样的话，你需要代理所有链接或有点击行为的元素，个人认为是一种得不偿失的做法。

设一个状态值就可以，就比如说，你滚动的时候状态值isScrolling = true;当滚动完成或者被点击停止时设置isScrolling = false. 事件触发只能在isScrolling= false时有效。

我也处理过相同的问题

区分点击事件，点击事件用touch替换

计算点击的时长和判断的距离，两个参数，判断是不是触发点击事件

如果还不清楚的话 我晚点给你一下demo

$(’#allItems’).delegate(’.js-snifferFullNet’,’click touchend’,function(e) { console.log(’touchend test2 数据是：’+(document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop)); var endTime = new Date().getTime() - startTime; console.log(endTime); if(e.type==’touchend’ &&((10<endTime)|| (Math.abs(touch_pos-(document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop))>3))) return; else{console.log(this);var type = e.currentTarget.childNodes[2].innerText;regClickBtn.snifferAllNetBtn(type); }});