webentwicklung-frage-antwort-db.com.de

klicken Sie mit der rechten Maustaste auf übergeordnete Klicks

Ich habe ein <div>-Element, das ein anderes <div>-Element als untergeordnetes Element hat. 

Ich habe die ng-click-Direktive zum übergeordneten Element hinzugefügt und erwartet, dass sie beim Klicken auf das untergeordnete Element nicht ausgelöst wird. Tut es aber.

<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 das Problem demonstriert

50
Maeh

Sie müssen die Weitergabe von Ereignissen 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 dessen Ereignis ausgelöst. Aber damit hört es nicht auf. Zuerst wird das Klickereignis des untergeordneten Elements ausgelöst, dann wird das Klickereignis des übergeordneten Elements ausgelöst und so weiter. Dies wird als Ereignisverbreitung bezeichnet. Um die Weitergabe von Ereignissen zu stoppen (Auslösen der Klickereignisse der Eltern), müssen Sie die obige Funktion stopPropagation verwenden. 


Arbeitsbeispiel

Ich habe ein paar CSS-Füllungen hinzugefügt, so dass das Beispiel klarer ist. Ohne Auffüllen 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.

86
itd

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

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

und in Ihrem Controller:

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