[英]How to click an html box without registering the click event of the box behind it?
I am new to angular and front end development.我是 angular 和前端开发的新手。 I have one box placed on top of another box both having their own separate click events.
我将一个盒子放在另一个盒子的顶部,两个盒子都有自己单独的点击事件。 The box on top is blue and the one behind it is red.
上面的盒子是蓝色的,后面的盒子是红色的。 Whenever I click on the blue box the red box's click event also registers.
每当我点击蓝色框时,红色框的点击事件也会注册。 Here's the code.
这是代码。 Also please do not use event.preventDefault();
也请不要使用 event.preventDefault(); event.stopPropagation();
event.stopPropagation(); if you're answering as it has given me trouble in the past.
如果你的回答是因为它过去给我带来了麻烦。
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>
I have reviewed your code and i have changed your css & html little bit and it works like a charm.我已经查看了您的代码,并且稍微更改了您的 css 和 html,它就像一个魅力。
box.html盒子.html
<div class="container">
<div class="box1" (click)="box1()"></div>
<div class="box2" (click)="box2()"></div>
</div>
box.css盒子.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;
}
box.ts盒子.ts
box1() {
console.log("box 1");
}
box2() {
console.log("box 2");
}
working demo: https://stackblitz.com/edit/angular-ivy-rxyqcd?file=src/app/app.component.ts工作演示: https://stackblitz.com/edit/angular-ivy-rxyqcd?file=src/app/app.component.ts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.