ng-kliknij na rodzic kliknięć przez dzieci

Question

Mam element <div>, który ma inny element <div> jako dziecko.

Dodałem dyrektywę ng-click do rodzica i spodziewam się, że nie zostanie zwolniony po kliknięciu na dziecko. Jednak tak się dzieje.

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

Dlaczego to robi i jak mogę tego uniknąć?

Oto JSFiddle wykazania problem

Answer 1

musisz anulować propagacji zdarzenia, więc zdarzenie kliknięcia elementu nadrzędnego nie zostanie wywołana. Wypróbuj:

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

Po kliknięciu elementu potomnego jego zdarzenie zostanie wyzwolone. Ale na tym się nie kończy. Najpierw wywoływane jest zdarzenie kliknięcia elementu podrzędnego, następnie wyzwalane jest zdarzenie kliknięcia elementu nadrzędnego i tak dalej. To się nazywa propagacja zdarzeń, Aby zatrzymać propagację zdarzeń (wyzwalanie zdarzeń kliknięcia dla rodziców), musisz użyć powyższej funkcji, stopPropagation.

---

Working example

dodałam trochę CSS dopełnienie, więc przykładem jest wyraźniejszy. Bez dopełnienia element potomny zajmuje całą wewnętrzną przestrzeń i nie można kliknąć elementu nadrzędnego bez kliknięcia elementu potomnego.

Answer 2

Jeśli chcesz ustawić różne funkcje dla rodzica i dziecka, możesz wysłać $ event jako parametr dla funkcji podrzędnej i stopPropagation wewnątrz niej. Tak:

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

w kontrolerze:

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