ng-click на родительских щелчках через дочерние объекты

Question

У меня есть элемент <div>, у которого есть еще один элемент <div> в качестве его дочернего элемента.

Я добавил директиву ng-click родительскому объекту и ожидал, что он не будет запущен при нажатии на дочерний элемент. Однако это так.

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

Почему это делается, и как я могу избежать этого?

Вот JSFiddle демонстрирует проблему

Answer 1

Вы должны отменить распространение события, поэтому нажмите событие родительского элемента не будет вызван. Попробуйте:

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

При нажатии дочернего элемента его событие запускается. Но это не останавливается на достигнутом. Сначала запускается событие click дочернего элемента, затем запускается событие щелчка родительского элемента и так далее. Это называется распространением событий. Чтобы остановить распространение событий (запуск событий щелчка родителей), вы должны использовать вышеуказанную функцию, stopPropagation.

---

Working example

Я добавил некоторые CSS отступы, так что пример яснее. Без заполнения дочерний элемент занимает все внутреннее пространство, и вы не можете нажать на родителя, не нажимая на дочерний элемент.

Answer 2

Если вы хотите установить разные функции для родителя и дочернего элемента, вы можете отправить $ event в качестве параметра для дочерней функции и остановить его внутри. Как это:

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

и в контроллере:

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