Ich habe einen ähnlichen Code wie unten und ich möchte Wenn ich auf Child Div klicke, sollte das Click-Ereignis Parent Div nicht ausgelöst werden.

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

Wenn ich auf " childDiv " klicke, wird zuerst das Ereignis " parentDiv () " und dann " childDiv () "Ereignis.

Können Sie mir bitte helfen, das Problem zu lösen?

Vielen Dank im Voraus

4
Ambuj Khanna 19 Apr. 2018 im 10:11

3 Antworten

Beste Antwort

Hier benötigen Sie event.stopPropagation();

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

Und

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

Was in Ihrem Fall passiert, wird als Ausbreitung von Ereignissen bezeichnet.

Wenn Sie auf untergeordnetes Div klicken, wird das Klickereignis auf übergeordnetes Div übertragen. Sie müssen diese Ausbreitung stoppen.

Oben ist der Weg dazu.

Oder wenn Sie eine einzeilige Lösung wollen, dann ist dies der Fall

<div class="childDiv"
 (click)="childDiv(event);$event.stopPropagation()" >Child Container</div>
4
George Bailey 19 Apr. 2018 im 07:25

Verwenden Sie event.stopPropagation(); in der Funktion, die an .childDiv angehängt ist

In Javascript gibt es etwas, das als Ereignisblasen bezeichnet wird. Wenn ein Ereignis für ein Element ausgelöst wird, wird es auch für alle übergeordneten Elemente ausgelöst.

Hier ist ein Code-Snippet, das den benötigten Code anzeigt

document.getElementById("parentDiv").addEventListener("click", function (e){
  alert('parentDiv clicked');
});

document.getElementById("childDiv").addEventListener("click", function (e){
  e.stopPropagation();
  alert('childDiv clicked');
});
<div id="parentDiv">
  Parent Container
   <div id="childDiv">Child Container</div>
</div>
1
Cory Kleiser 19 Apr. 2018 im 08:04

Aufhören zu sprudeln

Ein sprudelndes Ereignis geht vom Zielelement direkt nach oben. Normalerweise geht es nach oben bis <html> und dann zum Dokumentieren des Objekts. Einige Ereignisse erreichen sogar das Fenster und rufen alle Handler auf dem Pfad auf.

Jeder Handler kann jedoch entscheiden, dass das Ereignis vollständig verarbeitet wurde, und das Sprudeln stoppen.

Die Methode dafür ist 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>
1
Narendra Jadhav 19 Apr. 2018 im 08:42