1. 程式人生 > >app中頁面滑動,防止a連結誤觸

app中頁面滑動,防止a連結誤觸

問題

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