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