如何阻止事件回調自行啓動？

Question

我寫了一個Javascript事件監聽器來捕獲捕獲階段的點擊，執行一個動作，然後重複點擊觸發任何通常應該發生的代碼。

var obj=document.getElementById('button'); 
obj.addEventListener('click', function(event){ 
    event.stopPropagation(); 
    console.log('Performing operation here'); 
    otherOperation('ajax', function(){ 
     obj.click(); 
    }); 
}, true); 

顯然這會創建一個無限循環的操作。我認爲這是最好的方法，因爲操作需要時間延遲，我不能繼續事件傳播，直到我得到另一個回調。

有沒有辦法檢測點擊是由我自己的回調函數執行的，因此忽略它？

我有一個理論，在操作完成後刪除事件監聽器，但它需要在某些情況下再次添加，這會產生大量代碼。

Answer 1

一個在大多數瀏覽器上工作的黑客解決方案是複製按鈕本身，隱藏或刪除原來的按鈕，爲新的按鈕添加一個點擊處理程序，並在需要時調用舊的按鈕處理程序button.click()。

Answer 2

它在現代的瀏覽器（不是IE或Safari）瑣碎，用event.isTrusted，至極是唯一真正的，如果事件是由用戶操作

var obj=document.getElementById('button'); 

obj.addEventListener('click', function(event){ 

    if (event.isTrusted) { 

     event.stopPropagation(); 
     console.log('Performing operation here'); 
     otherOperation('ajax', function(){ 
      obj.click(); 
     }); 
    } else { 
     // click triggered by javascript 
    } 

}, true); 

如果您有支持Safari和IE9及以上的燃煤，你可以用自定義參數

var obj = document.getElementById('button'); 

obj.addEventListener('click', function(event) { 

    if ('trusted' in event && event.trusted === false) { 
     // click triggered by javascript  
    } else { 

     event.stopPropagation(); 
     console.log('Performing operation here'); 

     otherOperation('ajax', function() { 
      var ev = new MouseEvent('click', { // create event 
       'view': window, 
       'bubbles': true, 
       'cancelable': true 
      }); 

      ev.trusted = false; // add custom data 
      self.dispatchEvent(ev); // trigger event 
     }); 

    } 
}, true); 

jQuery的事件增加了幾分相似的功能，其中一個可能只是檢查是否有originalEvent知道，如果事件被觸發或者沒有發出事件。

Answer 3

如果我正確地理解了這個問題，那有兩個操作。 1.「其他操作」作爲異步呼叫觸發2.「正常」操作。

正常操作可以通過按鈕偵聽器中的回調來觸發，也可以通過任何其他方式單獨調用。下面的解決方案如何呢？

var obj=document.getElementById('button'); 
obj.addEventListener('click', function(event){ 
    event.stopPropagation(); 
    console.log('Performing operation here'); 
    otherOperation('ajax', function(){ 
     normalOperation(); 
    }); 
}, true); 

function normalOperation() { 
    //normal operation to be happened for click 
}