如何让子元素独立触发onClick事件而不影响父元素？

这是事件冒泡导致的问题——点击子元素<i>时，事件会沿着DOM树向上传播，触发父级<a>的点击事件。要实现你要的效果，有两种常用方法：

方法一：阻止子元素的事件冒泡 #

直接修改子元素的点击事件，通过event.stopPropagation()阻止事件向上传递：

修改后的HTML结构：

<div class="the-parent">
  <div>
    <a onClick="doParentStuff()">
      <div>
        <i onClick="doChildStuff(event)"></i>
      </div>
    </a>
  </div>
</div>

对应的JavaScript函数：

function doChildStuff(event) {
  // 阻止事件冒泡，避免触发父元素的点击事件
  event.stopPropagation();
  // 这里写你原本的doChildStuff逻辑
  console.log("执行子元素逻辑");
}

function doParentStuff() {
  // 这里写你原本的doParentStuff逻辑
  console.log("执行父区域逻辑");
}

这样点击<i>时，只会执行doChildStuff()，不会触发父级的doParentStuff()；点击.the-parent内除<i>之外的区域，会正常触发doParentStuff()。

方法二：使用事件委托统一处理 #

在父容器.the-parent上绑定一个点击事件，通过判断点击目标来决定执行哪个函数，这种方式更适合复杂DOM结构：

修改后的HTML结构：

<div class="the-parent" onClick="handleParentClick(event)">
  <div>
    <a>
      <div>
        <i></i>
      </div>
    </a>
  </div>
</div>

对应的JavaScript函数：

function handleParentClick(event) {
  // 判断点击的目标是不是<i>元素
  if (event.target.tagName.toLowerCase() === 'i') {
    doChildStuff();
  } else {
    doParentStuff();
  }
}

function doChildStuff() {
  console.log("执行子元素逻辑");
}

function doParentStuff() {
  console.log("执行父区域逻辑");
}

这种方式不需要给多个元素单独绑定事件，通过事件委托统一管理，扩展性更强。

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