我将一个框放置在另一个框的顶部,两个框都有自己单独的单击事件。上面的盒子是蓝色的,后面的盒子是红色的。每当我单击蓝色框时,红色框的单击事件也会注册。这是代码。另外请不要使用 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>
最佳答案
我已经检查了你的代码,并且对你的 css 和 html 进行了一些更改,它的效果就像一个魅力。
box.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
关于javascript - 如何在不注册后面的框的点击事件的情况下点击一个html框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70195269/