Ignorieren div klicken, wenn click auf Knopf innerhalb div war

Question

Ich habe ein div mit einem Knopf darin, der das div minimiert. Wenn Sie irgendwo anders im div klicken, werden Details zum div geladen. Ich möchte jedoch keine Details laden, wenn das div minimiert wird. Hier ist mein Code:

<div (click)="showDetails(key)" *ngFor="let key of keys"> 
    <button (click)="minimize(key)">Minimize</button> 
    <span>The rest of the content is here</span> 
</div> 

Wenn minimize ausgelöst wird, möchte ich ShowDetails ignorieren.

Answer 1

Ich bin nicht in der Lage zu testen, gerade jetzt, aber was Sie könnten versuchen, ist

(click)="minimize(key, $event)" 

In Ihrer Komponente

minimize(key, event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
} 

Versuchen Sie, mit entweder einer von ihnen und sehen, wie es geht!

Answer 2

, was Sie tun müssen, ist das übergeordnete Click-Ereignis durch Anhalten der Ausbreitung des Ereignisses stopPropagation() mit

HTML-Code zu ignorieren:

<div (click)="showDetails(key)" *ngFor="let key of keys"> 
    <button (click)="minimize(key,$event)">Minimize</button> 
    <span>The rest of the content is here</span> 
</div> 

ts Code:

minimize(key,event){ 
     event.stopPropagation(); 
} 

Answer 3

Einsatz event.stopPropagation() um zu verhindern, dass das Click-Ereignis das DOM aufblubbert.