JavaScript click 事件頻繁觸發？

之前在寫JavaScript的時候，不知為何很奇耙地搞出一個怪異的選取目標，並偶然發現它會因點擊目標父層的層數而觸發相對應的次數。

$(document).on('click',':not(#nav *)',function(e){ 
  console.log('trigger');
});

為了把這問題解決用很多種方法嘗試，結果只要多一行就解決了…

$(document).on('click',':not(#nav *)',function(e){ 
  if (e.target !== this)
    return;

  console.log('trigger');
});

click 和 touchend 一起用

另外一個寫不好的情況是 click 和 touch 事件一起用，造成兩個事件一起觸發。

$(document).on('click touchend','.toggle-button',function(e){
  e.preventDefault();
  $('#element').toggleClass('--active');
});

解決的方法是增加一個 flag：

var triggerFlag = false;
var triggerThreshold = 200;
$(document).on('click touchend','.toggle-button',function(e){
  e.preventDefault();
  if (!triggerFlag) {
    triggerFlag = true;
    setTimeout(()=>{ triggerFlag = false; }, triggerThreshold);
    $('#element').toggleClass('--active');
  }
});

類似的頻繁觸發

另外在 scroll 和 resize 時，常常會因為頻繁觸發而導致效能爆炸，解決的辦法稱為 Debounce + Throttle (防抖與節流)。