ng-click auf Elternklicks durch Kinder

Lesezeit: 3 Minuten

Ich habe ein <div> Element, das ein anderes hat <div> Element als sein Kind.

Ich habe die hinzugefügt ng-click -Anweisung an das übergeordnete Element und erwartet, dass sie nicht ausgelöst wird, wenn auf das untergeordnete Element geklickt wird. Allerdings tut es das.

<div class="outer" ng-click="toggle()">
    <div class="inner">You can click through me</div>
</div>

Warum tut es das und wie kann ich es vermeiden?

Hier ist ein JSFiddle das Problem demonstrieren

Benutzer-Avatar
Ziga Petek

Sie müssen die Ereignisweitergabe abbrechen, damit das Klickereignis des übergeordneten Elements nicht aufgerufen wird. Versuchen:

<div class="outer" ng-click="toggle()">
    <div class="inner" ng-click="$event.stopPropagation()">You can click through me</div>
</div>

Wenn Sie auf das untergeordnete Element klicken, wird sein Ereignis ausgelöst. Aber es hört hier nicht auf. Zuerst wird das Click-Ereignis des untergeordneten Elements ausgelöst, dann wird das Click-Ereignis des übergeordneten Elements ausgelöst und so weiter. Das nennt man Event-Propagation. Um die Event-Propagation (Auslösung der Click-Events der Eltern) zu stoppen, müssen Sie die obige Funktion verwenden, stopPropagation.


Arbeitsbeispiel

Ich habe etwas CSS-Padding hinzugefügt, damit das Beispiel klarer ist. Ohne Polsterung nimmt das untergeordnete Element den gesamten Innenraum ein und Sie können nicht auf das übergeordnete Element klicken, ohne auf das untergeordnete Element zu klicken.

  • wie kann .outer div ist anklickbar, wenn es keinen Text direkt darin gibt.

    – Bhojendra Rauniyar

    18. Januar 2015 um 13:41 Uhr

  • Und e.stopPropagation() sollte im übergeordneten div und nicht im untergeordneten div verwendet werden, damit dem untergeordneten div kein Klickereignis zugewiesen werden kann ….

    – Bhojendra Rauniyar

    18. Januar 2015 um 13:43 Uhr

  • Richtig, ich werde meine Antwort anpassen und ein funktionierendes Beispiel hinzufügen

    – Ziga Petek

    18. Januar 2015 um 13:45 Uhr

  • Eigentlich habe ich es gerade getestet und mein obiges Beispiel scheint gut zu funktionieren. Wenn Sie stopPropagation() für das übergeordnete Element anstelle des untergeordneten Elements verwenden, hat dies nicht den gewünschten Effekt. Es ist irgendwie sinnvoll, wenn Sie verhindern möchten, dass das Elternereignis ausgelöst wird, müssen Sie es stoppen, bevor es aufgerufen wird.

    – Ziga Petek

    18. Januar 2015 um 14:05 Uhr

  • Nun, ich habe den Fehler gemacht, OPs Original-jsFiddle nicht anzusehen. Falls jemand die gefixte Version von OPs jsFiddle sehen möchte: jsfiddle.net/3ghzsg40/1

    – Ziga Petek

    18. Januar 2015 um 14:12 Uhr

Wenn Sie unterschiedliche Funktionen für die übergeordnete und die untergeordnete Funktion festlegen möchten, können Sie $event als Parameter für die untergeordnete Funktion senden und darin stopPropagation enthalten. So was:

<div class="outer" ng-click="onParentClick()">
    <div class="inner" ng-click="onChildClick($event)">You can click through me</div>
</div>

und in deinem Controller:

function onChildClick(event){
    event.stopPropagation();
    //do stuff here...
}
function onParentClick(){
    //do stuff here..
}

  • Hat bei mir perfekt funktioniert! Ich habe nur ein wenig geändert, indem ich die anrief stopPropagation() -Methode innerhalb des Direktiven-Tags. ng-click="onChildClick($event); $event.stopPropagation()"

    – Felipe Belluco

    24. September 2019 um 17:17 Uhr


  • @FelipeRugai – danke, das hat auch bei mir funktioniert … nachdem ich buchstabiert habe stopPropOgation korrekt. 😛

    – Roller

    18. Juli 2021 um 18:13 Uhr

1283230cookie-checkng-click auf Elternklicks durch Kinder

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy