添加第二个点击事件监听器后JavaScript点击事件停止工作的问题求助

这个问题的核心是事件冒泡引发的冲突：当你点击.user-icon时，点击事件会沿着DOM树向上冒泡到document节点，导致两个点击监听器先后触发：

• 第一个监听器执行dropdown.classList.toggle('active')，给下拉容器加上了active类；
• 紧接着第二个监听器触发，此时e.target是.user-icon（并不属于.user-dropdown-container），所以会执行dropdown.classList.remove('active')，刚加上的类瞬间被移除，看起来就像第一个点击事件完全没生效。

修正后的代码方案 #

我们可以调整第二个监听器的判断逻辑，确保点击.user-icon或者下拉容器内部区域时，不会关闭下拉菜单：

var dropdown = document.querySelector('.user-dropdown-container');
var userIcon = document.querySelector('.user-icon');

userIcon.addEventListener('click', () => {
  dropdown.classList.toggle('active');
});

document.addEventListener('click', (e) => {
  // 检查点击目标是否既不是用户图标，也不在下拉容器内部
  if (!userIcon.contains(e.target) && !dropdown.contains(e.target)) {
    dropdown.classList.remove('active');
  }
});

可选方案：阻止事件冒泡 #

如果你不需要考虑下拉容器内部的点击交互，也可以在第一个点击事件中阻止事件冒泡，让点击.user-icon时事件不会传递到document：

var dropdown = document.querySelector('.user-dropdown-container');

document.querySelector('.user-icon').addEventListener('click', (e) => {
  e.stopPropagation(); // 阻止事件向上冒泡
  dropdown.classList.toggle('active');
});

document.addEventListener('click', (e) => {
  if (!e.target.classList.contains('user-dropdown-container')) {
    dropdown.classList.remove('active');
  }
});

不过这个方案有局限：如果下拉容器内有可点击元素，它们的事件冒泡也会被阻止（除非单独处理），因此第一种方案的灵活性和兼容性更好。

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