Angular 2 Stopp-Click-Ereignis Ausbreitung aller Kinder

Question

Wie die Click-Ereignis Ausbreitung aller Kinder Elemente zu stoppen:

<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> 

Ich möchte die modalen nur öffnen, mit dem div Elemente. Gibt es einen Weg, es zu tun?

Answer 1

Wenn Sie möchten, bedingt Logik auszuführen nur wenn das übergeordnete div Element geklickt wird (und nicht, wenn das Ereignis ausbreitet, wenn sie auf ein untergeordnetes Element klicken), dann könnte man überprüfen, um zu sehen, ob die Veranstaltung currentTarget property auf die gleich ist target property.

• Die currentTarget property bezieht sich immer auf das Element, dass das Ereignis gebunden ist. In diesem Fall ist das Ereignis (click) an das Element div gebunden.
• Die event.target property bezieht sich immer auf das Element, das das Ereignis ausgelöst hat.

Deshalb, wenn Sie nur Instanzen herausfiltern möchten, wo ein untergeordnetes Element geklickt wird und Sie möchten im Wesentlichen propagierten Ereignisse herauszufiltern, dann können Sie überprüfen, um zu sehen, ob $event.currentTarget gleich zu $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>