如何点击嵌套子元素时不触发外层父元素的点击事件？

问题本质 #

你的场景触发了DOM的事件冒泡机制：默认情况下，子元素上触发的点击事件会沿着DOM层级向上传递，依次触发所有父级元素绑定的同类型点击事件。

解决方式 #

在子元素div2的点击事件回调中调用event.stopPropagation()，即可中断事件的冒泡传递，不会再触发外层div1的点击事件。

修改后的JS代码如下：

const div1 = document.getElementById('div1')
const div2 = document.getElementById('div2')

div1.onclick = () => {
  console.log("Div 1")
}

div2.onclick = (e) => {
  // 阻止事件冒泡到上层元素
  e.stopPropagation()
  console.log("Div 2")
}

补充说明 #

如果你的场景还需要阻止事件的默认行为（比如点击a标签阻止跳转），可以额外调用event.preventDefault()，该方法和阻止冒泡没有关联，可以按需单独使用。

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