ng-click на родительских кликах через детей

Question

ng-click на родительских кликах через детей

41

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

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

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

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

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

Maeh 18 янв. 2015, в 14:56

Источник

Теги:

javascript

html

angularjs

css

1 ответ

Ещё вопросы

itd · Accepted Answer · 2015-01-18T14-58-00.000Z

Вам нужно отменить распространение событий, поэтому событие 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, поэтому пример более ясен. Без заполнения дочерний элемент занимает все внутреннее пространство, и вы не можете нажимать на родителя, не нажимая на дочерний элемент.

как может .outer div кликабельна, если в тексте ничего нет,
И e.stopPropagation () следует использовать в родительском div, а не в child div, чтобы дочернему div нельзя было назначить событие click ....
Правда я поправлю свой ответ и добавлю рабочий пример
Я не ожидал, что у OP будет дополнение к ним ... хотя +1 для вашего обновления ...
На самом деле, я только что проверил это, и мой пример выше, кажется, работает нормально. Если вы используете stopPropagation () для родительского элемента вместо дочернего, это не даст желаемого эффекта. Это имеет смысл, если вы хотите предотвратить запуск родительского события, вы должны остановить его, прежде чем оно будет вызвано.
Ну, я сделал ошибку, не глядя на оригинал OPs jsFiddle. Если кто-то хочет увидеть исправленную версию OPs jsFiddle: jsfiddle.net/3ghzsg40/1
ng-click="$event.stopPropagation(); clickFunctionForInnerDiv();" отличать родительское действие и не вызывать toggle() после