2012-02-05 2 views
3

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

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

так Heres пример 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 должен быть выпадающим меню. Он не должен переключаться, когда вы нажимаете меню, только когда вы нажимаете ссылку переключения ...

+1

вы делаете это с .off() на детей – frenchie

+0

так Youre говоря, что дети с наследственными слушателей событий следует использовать, чтобы отключить их? – qodeninja

+1

Да, это один из способов сделать это. StopPropagation - это еще один способ сделать это. Еще один способ сделать это - создать прослушиватель событий для дочернего div с функцией on() и не делать ничего. – frenchie

ответ

5

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

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

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

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

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

3

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

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

    ... 
});