如何阻止父DOM元素的点击事件触发？（附代码场景）

这是很常见的事件冒泡场景——浏览器默认的事件传播机制会让点击事件从触发的子元素，沿着DOM树向上冒泡到父元素、祖先元素，所以你点击子div时，child()执行后，父元素的parent()也会被触发。

要只触发子元素的点击事件，我们需要在子元素的事件处理函数里阻止事件继续向上传播，具体可以用event.stopPropagation()方法实现：

修改后的代码示例 #

HTML部分：

<div onclick="parent()">
  <div onclick="child(event)"></div>
</div>

JS部分：

function parent() {
  console.log("I'm your father");
}
function child(event) {
  console.log("You're not my father");
  // 阻止事件向上冒泡，父元素的点击事件就不会被触发了
  event.stopPropagation();
}

补充说明 #

• event.stopPropagation()的作用就是终止事件在DOM树中的传播，让事件停留在当前触发的元素，不会再触发父级元素的同类型事件。
• 如果你的项目更推荐用非内联事件绑定（比如addEventListener），写法会更清晰也便于维护，示例如下：

  // 获取元素
  const parentDiv = document.querySelector('div:first-child');
  const childDiv = parentDiv.querySelector('div');
  
  // 绑定事件
  parentDiv.addEventListener('click', parent);
  childDiv.addEventListener('click', function(event) {
    console.log("You're not my father");
    event.stopPropagation();
  });
  

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