javascript - 在移動設(shè)備上快速滾動屏幕然后點擊使?jié)L動停止,如何盡量避免在點擊時誤觸<a>標(biāo)簽,跳轉(zhuǎn)到其他頁?
問題描述
1 問題:在移動設(shè)備上快速滾動屏幕然后點擊使?jié)L動停止,如何盡量避免在點擊時誤觸a標(biāo)簽,跳轉(zhuǎn)到其他頁?
2 這也是在移動端的前端開發(fā)中實際遇到的一個問題,詳細說來就是在正常情況下,當(dāng)我們的當(dāng)前頁面內(nèi)容較多,高度上較高,出現(xiàn)滾動條的時候,當(dāng)我們用手滑動屏幕,屏幕上頁面內(nèi)容會快速滾動,不會因為手已經(jīng)離開了屏幕而滾動停止。這個時候,當(dāng)我們想要停止?jié)L動的時候,我們也輕輕點擊屏幕,讓屏幕停止。但是這個時候有個問題,如果屏幕上點擊的位置,正好有一個a標(biāo)簽,或者有一個button,這個時候就很容易進入下一個路由。查看了mdn上的關(guān)于scroll事件的一些說明,并沒有對scroll過程中的速度和停止的反應(yīng)時間這方面的說明。
我的思路是先判斷滾動事件是否已經(jīng)停止,當(dāng)停止之后,再給一定時間的延時,之后的點擊才有效。這樣的話,當(dāng)快速滾動之后,第一次點擊屏幕,讓屏幕滾動停止,第二次點擊屏幕,如果是點擊了一個a標(biāo)簽才能跳轉(zhuǎn)到其他路由。應(yīng)該如何實現(xiàn)呢。
問題解答
回答1:你們產(chǎn)品要求這么苛刻嗎,我感覺這不應(yīng)該成為問題,應(yīng)該遵循這樣的物理邏輯,我是沒見過哪個產(chǎn)品規(guī)避了這個邏輯。如果非要解決,你的思路是可行的,那樣的話,你需要代理所有鏈接或有點擊行為的元素,個人認(rèn)為是一種得不償失的做法。
回答2:設(shè)一個狀態(tài)值就可以,就比如說,你滾動的時候狀態(tài)值isScrolling = true;當(dāng)滾動完成或者被點擊停止時設(shè)置isScrolling = false. 事件觸發(fā)只能在isScrolling= false時有效。
回答3:我也處理過相同的問題
區(qū)分點擊事件,點擊事件用touch替換
計算點擊的時長和判斷的距離,兩個參數(shù),判斷是不是觸發(fā)點擊事件
如果還不清楚的話 我晚點給你一下demo
$(’#allItems’).delegate(’.js-snifferFullNet’,’click touchend’,function(e) { console.log(’touchend test2 數(shù)據(jù)是:’+(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); }});
