如何点击上层HTML盒子不触发下层被遮挡盒子的点击事件

问题原因 #

当前事件触发异常是由于box2是box1的子节点，浏览器事件默认存在冒泡机制：事件会从实际触发的元素逐层向上传递到所有父级元素，因此点击box2时，父元素box1绑定的点击事件也会被触发。

可行解决方案（不使用stopPropagation/preventDefault） #

方案1：在父元素事件中判断触发源 #

仅当事件的实际触发元素是box1本身时，才执行对应的逻辑，子元素触发的冒泡事件会被直接过滤。无需调整原有DOM和CSS，仅修改事件逻辑即可生效。

修改后代码

HTML部分：

<div class="container">
    <div class="box1" (click)="box1($event)">
        <div class="box2" (click)="box2()">
        </div>
    </div>
</div>

JS部分：

box1(e) {
  // 仅点击box1本身时执行逻辑
  if (e.target.classList.contains('box1')) {
    console.log("box 1");   
  }
}
box2() {
  console.log("box 2");
}

方案2：调整DOM结构为平级，从根源避免冒泡 #

如果业务场景允许两个盒子无嵌套关系，可以直接把两个盒子改成平级节点，通过定位实现原有叠放效果，完全消除事件冒泡的前提条件。无需修改原有事件逻辑，也不会遗留后续事件冲突隐患。

修改后代码

HTML部分：

<div class="container">
    <div class="box1" (click)="box1()"></div>
    <div class="box2" (click)="box2()"></div>
</div>

CSS部分：

.container {
  position: relative;
}
.box1{
    position: absolute;
    left : 100px;
    top: 100px;
    width: 400px;
    height: 400px;
    background-color: red;
}
.box2{
    position: absolute;
    left : 200px; /* 可根据实际布局需求调整偏移值，保持和原有叠放位置一致即可 */
    top: 200px;
    width: 400px;
    height: 400px;
    background-color:blue;
}

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