Проблема с Bubbling с делегированным событием на родительском узле с JavaScript

Question

У меня проблемы с правильной настройкой моего события. Я верю в делегированное событие.

У меня есть некоторые разметки, как:

<div id="wrapper"> 
<!-- more HTML --> 
    <div class="clear"> 
    <a href="#"> 
     Clear completed <span>items</span> 
    </a> 
    </div> 
</div> 

Я хочу, чтобы добавить событие в .clear, и поэтому я ставлю положил код обработки внутри делегированного события, которое прилагается к #wrapper. Моя проблема в том, что мое событие не похоже на пузырь. Иными словами:

getElementById('wrapper').addEventListener('click', app.controller.update, true); 

app.controller.update = function(e){ 
    console.log(e.target.nodeName) //returns either A or SPAN 
    while(e.target.nodeName !== 'DIV'){ 
    //Infinite loop because no bubbling is happening 
    } 
} 

Идеи? Да, я могу привязать его непосредственно к элементу, но я хотел бы сохранить все события в одном контейнере. И нет, нет jQuery.

Answer 1

Событие барботирования означает, что событие, поднятое на дочернем узле, может обрабатываться родительским узлом (если он не отменен этим дочерним узлом).

e.target содержит инициатора мероприятия. Итак, если вы нажмете на span или a тег, он будет содержать ссылки на эти теги. Чтобы проверить, если щелчок был инициирован в div#clear вы можете попробовать такой цикл:

var el = e.target || e.srcElement; 
while(el.nodeName !== 'DIV' && (el.id !== 'clear' || el.id !== 'wrapper')) 
// climb up to parent nodes until clear or wrapper is found 
{ 
    el = el.parentNode; 
} 
if (el.id == 'clear') 
{ 
    // Do smth 
}