Ng-click по родительским щелчкам по дочерним элементам

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

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

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

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

Здесь JSFiddle, демонстрирующий проблему

Ответ 1

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

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

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

Рабочий пример

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