Tengo un cuadro colocado encima de otro cuadro que tiene sus propios eventos de clic separados. La caja de arriba es azul y la de atrás es roja. Cada vez que hago clic en el cuadro azul, también se registra el evento de clic del cuadro rojo. Aquí está el código. Además, no utilice event.preventDefault(); event.stopPropagation(); si está respondiendo ya que me ha dado problemas en el pasado.
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>He revisado su código y he cambiado un poco su css y html y funciona de maravilla.
cuadro.html
<div class="container"> <div class="box1" (click)="box1()"></div> <div class="box2" (click)="box2()"></div> </div>caja.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; }caja.ts
box1() { console.log("box 1"); } box2() { console.log("box 2"); }demostración de trabajo: https://stackblitz.com/edit/angular-ivy-rxyqcd?file=src/app/app.component.ts