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

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;

    ...
});