kątowa propagacja zdarzenia click 2 zatrzymanie wszystkich dzieci

Question

Jak powstrzymać rozprzestrzenianie zdarzenia kliknięcia wszystkich dzieci elementów:

<div (click)="openModal()"> 
    <span>Click in this element open the modal</span> 
    <li>Click in this element open the modal too</li> 
    <p>Click in this element open the modal too</p> 
    <input type="button">Click in this element open the modal too</input> 
</div> 

Chcę otworzyć modal tylko z elementem div. Czy jest jakiś sposób na zrobienie tego?

Answer 1

Jeśli chcesz warunkowo wykonanie logiki tylkogdy element nadrzędny div kliknięciu (a nie, gdy zdarzenie rozchodzi się po kliknięciu na elemencie dziecko), a następnie można sprawdzić, czy zdarzenie na currentTarget property jest równa target property.

• Parametr currentTarget property zawsze odnosi się do elementu, do którego zdarzenie jest powiązane. W takim przypadku zdarzenie (click) jest powiązane z elementem div.
• Parametr event.target property zawsze odnosi się do elementu, który wywołał zdarzenie.

Dlatego, jeśli chcesz tylko odfiltrować przypadki, w których element dziecko kliknięciu i chcesz zasadniczo odfiltrować propagowane zdarzenia, a następnie można sprawdzić, czy $event.currentTarget jest równa $event.target:

public openModal ($event) { 
    if ($event.currentTarget === $event.target) { 
    // Clicked on the parent `div` element with the 
    // click event binding `(click)="openModal($event)"` 
    console.log('Clicked the parent, not the child.'); 
    } 
} 

<div (click)="openModal($event)"> 
    <span>...</span> 
    <p>...</p> 
</div>