如何点击一个html盒子而不注册它后面盒子的点击事件？

Question

我是 angular 和前端开发的新手。 我将一个盒子放在另一个盒子的顶部，两个盒子都有自己单独的点击事件。 上面的盒子是蓝色的，后面的盒子是红色的。 每当我点击蓝色框时，红色框的点击事件也会注册。 这是代码。 也请不要使用 event.preventDefault(); event.stopPropagation(); 如果你的回答是因为它过去给我带来了麻烦。

 box1() { console.log("box 1"); } box2() { console.log("box 2"); }

 .box1{ left: 100px; top: 100px; width: 400px; height: 400px; background-color: red; }.box2{ position: relative; left: 100px; top: 100px; width: 400px; height: 400px; background-color:blue; }

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

Answer 1

我已经查看了您的代码，并且稍微更改了您的 css 和 html，它就像一个魅力。

盒子.html

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

盒子.css

.box1 {
  position: fixed;
  left: 100px;
  top: 100px;
  width: 400px;
  height: 400px;
  background-color: red;
  z-index: 0;
}
.box2 {
  position: fixed;
  left: 200px;
  top: 200px;
  width: 400px;
  height: 400px;
  background-color: blue;
  z-index: 999;
}
.container {
  position: relative;
  left: 100px;
  top: 100px;
}

盒子.ts

 box1() {
    console.log("box 1");   
  }
  box2() {
    console.log("box 2");
  }

工作演示： https://stackblitz.com/edit/angular-ivy-rxyqcd?file=src/app/app.component.ts