javascript - hur man stoppar föräldraförfrågan om ett klick på barn i angular2

Jag har liknande kod som nedan och jag vill att om jag klickar på Child Div så ska inte Parent Divs klickhändelse triggas.

<div class="parentDiv" (click)="parentDiv()">
   <div class="childDiv" (click)="childDiv()">Child Container</div>
</div>

När jag klickar på "childDiv" så utlöser det först "parentDiv()"-händelsen och sedan "childDiv()"-händelsen.

Kan du snälla hjälpa mig att lösa det?

Tack på förhand

Svar #1

Det här är där du behöver event.stopPropagation();

<div class="childDiv" (click)="childDiv(event)">Child Container</div>

Och

childDiv(event) {
 event.stopPropagation();
}

Det som händer i ditt fall kallas spridning av händelser.

När du klickar på ett barn-div, sprids klickhändelsen till föräldra-div. Du behöver stoppa den spridningen.

Ovan är sättet att göra det på.

Eller om du vill ha en lösning på en rad är detta det

<div class="childDiv"
 (click)="childDiv(event);$event.stopPropagation()" >Child Container</div>

Svar #2

Slutar bubbla

Ett bubblande event går från målelementet rakt upp. Normalt går det uppåt till <html>, och sedan till dokumentobjektet, och vissa events når till och med fönstret, vilket kallar alla handlare på vägen.

Men vilken som helst hanterare kan avgöra att händelsen har behandlats fullständigt och stoppa bubblingen.

Metoden för det är event.stopPropagation().

<div class="parentDiv" (click)="parentDiv()">
   <div class="childDiv" (click)="$event.stopPropagation()">Child Container</div>
</div>

DEMO

function parentDiv() {
  alert('parent div')
}

div {
  cursor: pointer;
}

<div class="parentDiv" onclick="parentDiv()">Parent Div
  <div class="childDiv" onclick="event.stopPropagation()">Child Container</div>
</div>