javascript - 在行動裝置上快速滾動螢幕然後點擊使滾動停止，如何盡量避免在點擊時誤觸<a>標籤，跳到其他頁？

Question

1 問題：
在行動裝置上快速滾動螢幕然後點擊使滾動停止，如何盡量避免在點擊時誤觸a標籤，跳到其他頁面？

2 這也是在行動端的前端開發中實際遇到的一個問題，詳細說來就是在正常情況下，當我們的當前頁面內容較多，高度上較高，出現滾動條的時候，當我們用手滑動螢幕，螢幕上頁面內容會快速滾動，不會因為手已經離開了螢幕而滾動停止。這個時候，當我們想要停止滾動的時候，我們也輕輕點擊螢幕，讓螢幕停止。但這個時候有個問題，如果螢幕上點擊的位置，剛好有一個a標籤，或是有一個button，這個時候就很容易進入下一個路由。查看了mdn上的關於scroll事件的一些說明，並沒有對scroll過程中的速度和停止的反應時間這方面的說明。

我的想法是先判斷滾動事件是否已經停止，當停止之後，再給一定時間的延時，之後的點擊才有效。這樣的話，當快速滾動之後，第一次點擊螢幕，讓螢幕滾動停止，第二次點擊螢幕，如果是點擊了一個a標籤才能跳到其他路由。應該如何實現。

Answer 1

你們產品要求這麼苛刻嗎，我感覺這不應該成為問題，應該遵循這樣的物理邏輯，我是沒見過哪個產品規避了這個邏輯。如果非要解決，你的思路是可行的，那樣的話，你需要代理所有連結或有點擊行為的元素，個人認為是一種得不償失的做法。

Answer 2

設一個狀態值就可以，就比如說，你滾動的時候狀態值isScrolling = true;當滾動完成或被點擊停止時設定isScrolling = false. 事件觸發只能在isScrolling= false時有效。

Answer 3

我也處理過相同的問題

• 區分點擊事件，點選事件用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);
            }
        });