событие делегации Просто нажмите кнопку не работает

Question

У меня есть DIV

<div class="myDiv"> 
    <a href="#" class="myLink">somelink</a> 
    <div class="anotherDiv">somediv</div> 
</div> 

Теперь, используя делегирование событий и понятие пропускании я хотел бы перехватывать щелчки любого из myDiv, MyLink и anotherDiv.

Согласно передовой практике это может быть сделано путем прослушивания кликов по всему миру (отсюда термин «делегация») на самом документе

$(document).click(function(e) { 
    var $eventElem = $(e.target); 
    var bStopDefaultClickAction = false; 

    if ($eventElem.is('.myDiv')) 
    { 
    alert('Never alerts when clicking on myLink or anotherDiv, why????'); 
    bStopDefaultClickAction = true; 
    } 

    return bStopDefaultClickAction; 
}); 

Смотрите мое предупреждение вопрос выше. У меня создалось впечатление, что клики пузырьков. И это несколько потому, что документ фактически получает мой клик и начинает делегировать. Но механизм пузырьков для кликов на myLink и anotherDiv, похоже, не работает, так как оператор if не вступает.

Или это выглядит так: щелчок только пузырька на один шаг, от щелкнутого элемента src до назначенный объект делегирования (в данном случае документ)? Если это так, то мне нужно обрабатывать делегацию так:

$('.myDiv').click(function(e) { 
    //...as before 
}); 

Но этот вид defeates с целью делегирования как я теперь должен иметь много обработчиков «myDiv» и, возможно, других ... он мертв легко просто иметь один объект делегирования событий документа.

Кто-нибудь знает, как это работает?

Answer 1

Цель события не изменится. Вам нужно отразить, что делает jquery live, и на самом деле проверить, соответствует ли $ eventElem.closest ('. MyDiv').

Try:

$(document).click(function(e) { 
    var $eventElem = $(e.target); 
    var bStopDefaultClickAction = false; 

    if ($eventElem.closest('.myDiv').length) 
    { 
    alert('Never alerts when clicking on myLink or anotherDiv, why????'); 
    bStopDefaultClickAction = true; 
    } 

    return bStopDefaultClickAction; 
}); 

Answer 2

Вы должны использовать живое событие с JQuery (с 1.3), она использует делегирование событий:

http://docs.jquery.com/Events/live

Так вы код будет:

$(".myDiv").live("click", function(){ 
     alert('Alert when clicking on myLink elements. Event delegation powaa !'); 

}); 

с этим, у вас есть все преимущества делегирования событий (быстрее, один прослушиватель событий и т. д.), без боли ;-)

Answer 3

Event.target всегда является элементом, вызвавшим событие, поэтому когда вы нажимаете «myLink» или «anotherDiv», вы храните ссылку на эти объекты, используя $ (e.target); Итак, что вы делаете: $ ('. MyLink'). Is ('. MyDiv'), который возвращает false, и поэтому alert() не выполняется.

Если вы хотите использовать делегирование событий таким образом, вы должны проверить Wheter event.target является элементом или любой из его детей, с помощью JQuery это можно сделать так:

$(e.target).is('.myDiv, .myDiv *') 

Answer 4

Кажется, работает отлично мне. Попробуйте его здесь: http://jsbin.com/uwari

Answer 5

Проверьте это: Один клик обработчик на одной странице

var page = document.getElementById("contentWrapper"); 
page.addEventListener("click", function (e) { 
    var target, clickTarget, propagationFlag;  
    target = e.target || e.srcElement; 
    while (target !== page) { 
     clickTarget = target.getAttribute("data-clickTarget"); 
     if (clickTarget) { 
      clickHandler[clickTarget](e); 
      propagationFlag = target.getAttribute("data-propagationFlag"); 
     } 
     if (propagationFlag === "true") { 
      break; 
     } 
     target = target.parentNode; 
    } 
});