Как вы мешаете детям распространять событие, инициированное живым слушателем / делегатом?

Question

У меня есть родительский делегат, который прослушивает события щелчка в наборе детей с определенным классом.

$(".toggle_group").on("click",".toggle",function(e){ .. });

так вот пример HTML

<div class='toggle_group'>
  <a class='toggle'>click me and i toggle <div>Im a child of toggle</div></a>
  <a class='toggle'>click me and i toggle <div>Im a child of toggle</div></a>
  <a class='toggle'>click me and i toggle <div>Im a child of toggle</div></a>
  <a class='toggle'>click me and i toggle <div>Im a child of toggle</div></a>
</div>

проблема в том, что дети a.toggle распространять событие на родителя, запускающего обработчик, когда это не должно происходить. Согласно документации jQuery, вы не можете остановить распространение событий на живых / делегированных слушателях событий.

Как мне остановить этих дочерних дочерних элементов a.toggle от распространения события на родителя? или может в некоторых случаях разрешить это?

Вы видите внутренний div .toggle должен быть выпадающим меню. Он не должен переключаться при нажатии на меню, только при нажатии на ссылку переключения...

Answer 1

Проверьте комментарии на этой странице, по крайней мере, некоторые претензии, чтобы найти обходной путь. http://api.jquery.com/event.stopPropagation/

Скопировал комментарий из ветки здесь для дальнейшего использования:

MikeW: обойти проблемы с распространением событий.live(). динамически создаваемые узлы не получат событие, пока его не получит их родитель. это вызовет фанки и stopPropagation, а предотвращение дефолта не решит эту проблему. Исправить: добавить линии

if(event.target!= this){ return true; }

в начало обработчика событий родительских узлов. это остановит родительское событие, если событие фактически адресовано дочернему узлу, и (в отличие от return false) распространит событие на предполагаемый узел.

Answer 2

Другой подход состоит в том, чтобы выполнять ваш обработчик функции только в том случае, если событие происходит от элемента с .toggle класс (или один из его детей), а не .toggle_group сам элемент.

$(".toggle_group").on("click",".toggle",function(e){
    if (!$(e.target).is(".toggle")) return;

    ...
});