如何避免点击激活按钮时触发刚添加的document.body点击监听器？

问题根源很明确：你点击激活按钮时，按钮的click事件会顺着DOM树向上冒泡到document.body，而你刚好在这个点击事件的处理过程中给body绑定了clickBody监听器，所以这个冒泡过来的事件直接触发了刚绑定的函数。

给你两种实用的解决办法：

方法一：阻止激活按钮的事件冒泡 #

直接在激活按钮的点击事件里阻止事件向上冒泡，切断事件传递到body的路径，避免刚绑定的监听器被触发。

修改后的完整代码：

HTML #

<body>
  <button onclick="activateListenerClickBody(event)">Activate click listener body</button>
  <button onclick="removeClickBody()">Remove click listener</button>
</body>

JavaScript #

function clickBody(){
  alert("click body");
}

function removeClickBody(){
  document.body.removeEventListener("click",clickBody);
}

function activateListenerClickBody(event){
  // 阻止事件冒泡到body
  event.stopPropagation();
  document.body.addEventListener("click",clickBody);
}

这种方法精准可控，不会影响页面其他事件的正常冒泡逻辑。

方法二：延迟绑定监听器 #

利用浏览器的事件循环机制，把监听器绑定操作推迟到当前按钮点击事件处理完成后再执行，此时冒泡的事件已经走完流程，不会触发新绑定的函数。

修改后的JavaScript代码：

function clickBody(){
  alert("click body");
}

function removeClickBody(){
  document.body.removeEventListener("click",clickBody);
}

function activateListenerClickBody(){
  // 延迟到当前事件循环结束后再绑定监听器
  setTimeout(() => {
    document.body.addEventListener("click",clickBody);
  }, 0);
}

这种方法不需要改动HTML，代码改动最小，适合不想处理事件对象的场景。

两种方法都能解决你的问题，根据自己的代码习惯选择即可。

内容的提问来源于stack exchange，提问作者yavgz