如何避免点击上层元素时触发底层元素的onClick事件

嘿，我懂你遇到的困扰了——点击红色的背景容器时想弹出"Hello!"，但点上面的绿色按钮时却不想触发这个操作，对吧？这其实是事件冒泡在作祟：浏览器默认会把子元素的点击事件向上传递给父元素，所以哪怕你点的是按钮，父容器的onClick也会跟着触发。

下面给你几个靠谱的解决方案：

方法1：在子元素中阻止事件冒泡 #

直接给按钮添加点击事件，调用event.stopPropagation()来阻止事件向上传递到父容器：

<div class="container" onClick="handleClick()">
  <div class="button" onClick="event.stopPropagation()"></div>
</div>

这样点击按钮时，事件就不会冒泡到父容器，自然不会触发handleClick函数了。如果你的按钮本身还有自己的点击逻辑，也可以把阻止冒泡的代码写在对应的函数里。

方法2：在父容器的事件处理函数中判断点击目标 #

修改handleClick函数，检查实际点击的元素是不是容器本身，只有满足条件时才执行操作：

function handleClick(event) {
  // event.target是实际被点击的元素，event.currentTarget是绑定事件的容器
  if (event.target === event.currentTarget) {
    alert("Hello!");
  }
}

这个方法更灵活，尤其是当你有多个子元素时，不用给每个子元素都加阻止冒泡的代码，只需要在父容器的处理函数里做一次判断就行。

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