改写JavaScript消除闪烁：解决两段代码的触发冲突问题

你遇到的这个闪烁问题，本质是事件冒泡在搞鬼：当点击.info元素时，点击事件会顺着DOM树向上传递，触发了第一段代码绑定的上层元素（甚至body）的事件处理器，意外执行了类名的添加/移除操作。下面给你两种靠谱的解决思路：

方案一：阻止事件冒泡（快速解决） #

直接在第二段代码的点击事件里，阻止事件向上传播，这样点击.info时就不会触发第一段的逻辑了。修改你的第二段代码如下：

document.querySelector('.info').addEventListener('click', function(event) {
  // 关键：阻止事件冒泡到上层元素
  event.stopPropagation();
  
  // 这里保留你原本的.info元素处理逻辑
  // 比如：
  // this.classList.toggle('active');
  // ... 其他代码
});

event.stopPropagation()会切断事件的向上传播路径，确保只有.info的点击逻辑被执行，不会干扰到第一段代码。

方案二：合并代码（更优雅的长期方案） #

用事件委托把两段逻辑合并到一个事件处理器里，通过判断点击目标来区分执行逻辑，从根源上避免冲突。假设第一段代码是绑定在某个容器（比如.card）上的，合并后的代码示例：

// 选择一个共同的父元素（比如body，或者两段元素的上层容器）
document.querySelector('.parent-container').addEventListener('click', function(event) {
  const clickedElement = event.target;
  
  // 处理第一段代码的逻辑：点击目标是第一段的元素时
  if (clickedElement.matches('.your-first-element-class')) {
    // 执行原本的body类名切换逻辑
    document.body.classList.toggle('your-target-class');
  }
  // 处理第二段代码的逻辑：点击目标是.info时
  else if (clickedElement.matches('.info')) {
    // 执行原本的.info元素处理逻辑
    // 比如：
    // clickedElement.textContent = '已点击';
    // ... 其他代码
  }
});

这种方式的好处：

• 只绑定一个事件处理器，性能更优
• 从根源上避免了事件冒泡的冲突
• 后续新增同类元素时，不需要重复绑定事件，维护更方便

如果你的第一段代码是直接绑定在body上的，那方案一的阻止冒泡会更直接；如果两段元素有共同的上层容器，方案二的事件委托会更推荐。

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