ng Sie auf Eltern Klicks durch Kinder

Question

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

Ich habe die ng-click Richtlinie zur Mutter, und erwartete, dass es nicht gefeuert werden, wenn das Kind klicken. Es tut es jedoch.

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

Warum macht es das, und wie kann ich es vermeiden?

Hier ist ein JSFiddle demonstriert das Problem

Answer 1

Sie haben Ereignispropagierung abzubrechen, so dass das Click-Ereignis des übergeordneten Elements wird nicht aufgerufen. Versuchen Sie:

Wenn Sie auf das untergeordnete Element klicken, wird sein Ereignis ausgelöst. Aber damit hört es 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 Ereignispropagierung. Um die Ereignisausbreitung zu stoppen (Auslösen der Elternklickereignisse), müssen Sie die obige Funktion stopPropagation verwenden.

---

Working example

Ich habe einige CSS padding, so ist das Beispiel klarer. Ohne Auffüllung nimmt das Kindelement den gesamten Innenraum ein und Sie können nicht auf das Elternelement klicken, ohne auf das Kind zu klicken.

Answer 2

Wenn Sie verschiedene Funktionen für die Eltern und das Kind festlegen möchten, können Sie $ Ereignis als Parameter für das Kind Funktion und stopPropagation innen von ihm senden. Wie folgt aus:

<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.. 
}