[英]How to click an html box without registering the click event of the box behind it?
我是 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>
我已經查看了您的代碼,並且稍微更改了您的 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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.