在 onclick 中附加點擊事件監聽器會立即調用該事件監聽器

Question

在用戶單擊頁面上的特定元素后，我將一個click事件偵聽器附加到document 。 但是，在調用onclick function 之后立即調用此事件偵聽器，這是不可取的。 它似乎對onclick和剛剛添加的document click偵聽器使用相同的點擊事件。

如何確保我添加到文檔中的事件偵聽器在下一次單擊發生之前不會被調用？

document.getElementById('someID').onclick = function(e) {
    document.addEventListener('click', myDocClickListener);
    return false; //handled click
}

function myDocClickListener(e) {
    //...
    //should only be called for future clicks not the one that just occurred in the above function
}

Answer 1

這是由於事件冒泡而發生的。 您需要在處理程序中停止冒泡：

document.getElementById('someID').onclick = function(e) {
    e.stopPropagation();
    document.addEventListener('click', myDocClickListener);
    return false; //handled click
};

您可能還需要跟蹤是否已附加處理程序，因此，如果兩次單擊someID最終不會附加兩次。

而且，除非此處理程序位於a元素上，否則您實際上不需要返回false 。

Answer 2

JLRishe 的回答是正確的，但是如果你因為某些原因不想做stopPropagation ，你可以在下一個事件循環中添加事件監聽器：

document.getElementById('someID').onclick = function(e) {
    setTimeout(
      () => document.addEventListener(
        'click',
        myDocClickListener
      ),
      0
    );
    return false; // only needed for <a> 
};