如何僅在點擊事件監聽器被觸發后才添加點擊事件監聽器？

Question

我正在嘗試實現以下功能：用戶單擊按鈕后，我想將單擊事件偵聽器添加到 window 元素以提醒消息（例如）。

為此考慮以下代碼片段：

 <button id="b1">click</button> <script> document.querySelector("#b1").addEventListener('click', () => { window.addEventListener("click", () => { alert("hello"); }); }) </script>

但是，不幸的是，當用戶最初點擊按鈕（我不想要）時，上面的代碼也會發出警告消息。 關於如何實現功能的任何想法？

Answer 1

最好添加 window 單擊事件偵聽器並有一個標志來確定是否應顯示警報。

您使用的方法的問題是，每次用戶單擊按鈕時，您都會向 window 添加一個新的事件偵聽器。然后，每次單擊文檔時，這將疊加並觸發多次。

要阻止按鈕單擊傳遞到文檔並觸發 window 事件偵聽器，您可以使用事件stopPropagation()方法，如下所示。

 let hasButtonBeenClicked = false; window.addEventListener("click", () => { if(hasButtonBeenClicked) { alert("hello"); hasButtonBeenClicked = false; } }); document.querySelector("#b1").addEventListener('click', (e) => { e.stopPropagation() hasButtonBeenClicked = true; })

 <button id="b1">click</button>