app中頁面滑動,防止a連結誤觸
阿新 • • 發佈:2018-11-10
問題
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); });