无需修改子事件处理器即可阻止父元素点击事件误触发

不需要给所有子元素逐个添加stopPropagation()，只需要修改父元素的点击事件处理器，加一层触发源判断即可，完全不需要改动子元素的已有代码。

核心判断逻辑是对比事件对象的两个属性：

• event.target：事件实际触发的最底层元素，也就是鼠标真正点到的元素
• event.currentTarget：当前事件绑定的元素，这里就是父元素本身
  只有两个值完全相等时，才说明点击的是父元素自身，不是内部的子元素。

修正后的代码 #

JavaScript 部分 #

document.getElementById('parent').addEventListener('click', (e) => {
  // 仅当点击父元素自身时执行逻辑
  if (e.target === e.currentTarget) {
    console.log('parent clicked')
  }
})
// 子元素原有事件不需要做任何修改
document.getElementById('child2').addEventListener('click', () => {
  console.log('child2 clicked')
})

CSS 部分（无需修改） #

#parent {
  height: 300px;
  width: 300px;
  background-color: Lightgreen;
  wrap: true;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 50px 50px;
}
#parent * {
  height: 100px;
  width: 100px;
  background-color: white;
  text-align: center;
  display: grid;
  place-items: center;
}

HTML 部分（无需修改） #

<div id="parent"> parent -Only log 'parent' when green background is clicked and nothing else-
  <div id="child1">child1 <br> -Nothing should happen when clicked-</div>
  <div id="child2">child2 <br> -Should only log -child 2 if clicked-</div>
</div>

方案优势 #

• 改动成本极低：仅需要修改父元素的事件处理器，不需要给所有子元素加额外逻辑
• 覆盖所有场景：不管子元素有没有绑定独立事件，点击子元素时都不会误触发父元素的处理逻辑
• 不破坏事件流：不会阻止正常的事件冒泡，不会影响页面上其他依赖事件冒泡的功能

实际运行效果：

1. 点击父元素的绿色背景区域：控制台输出parent clicked
2. 点击child1：控制台无任何输出
3. 点击child2：控制台仅输出child2 clicked，不会触发父元素的日志

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