JavaScript Нажмите Обработка событий

Question

Поэтому я прикрепляю событие к документу, чтобы наблюдать, когда событие клика происходит на конкретном якоре с классом yui3-pjax, в некоторых случаях якорь имеет дочерний элемент span. Как я могу наблюдать за пузырьками событий только для привязки? Мой текущий Условный оператор для просмотра события является:

document.addEventListener('click', function(evt) { 
    if(evt.target.classList.contains('yui3-pjax') || evt.target.parentNode.classList.contains('yui3-pjax')) { 
    // do stuff 
    } 
}); 

HTML сниппеты

<a class="page_current yui3-pjax" href="/forum/chatterbox/last-person-to-reply-wins/t.94028885_991/" title="page 67"> 
    67 
</a> 
<a class="yui3-pjax cta-button-sm gray-button postitem-link pull-right" href="/forum/chatterbox/last-person-to-reply-wins/t.94028885_991/"> 
    <span>67</span> 
</a> 

Я не уверен, есть ли лучший способ, чем смотреть как якорь и родительского SPAN элемента (то же самое якорь), не привязывая его к самому якорю, но проблема с этим - некоторые из якорей динамически генерируются, и this явно не сработает, так как он будет ссылаться на документ. Есть идеи?

Редактировать: Я думаю, что есть некоторые путаницы в отношении того, что я прошу. Позвольте мне пояснить, мне нужно только проверить якорь, если у него есть класс yui3-pjax. Я не уверен, как справиться с распространением/пузырьком события от дочернего элемента или потомка этого якоря для достижения этого.

Answer 1

Надеюсь, я правильно понимаю это. Вместо того, чтобы вручную проверять элемент и родительский элемент для определенного класса, я бы вместо этого написал функцию, которая возвращает объект DOM, чтобы выяснить, содержится ли цель события в элементе с данным классом. Таким образом, вам не нужно писать код, который опирается на структуру HTML, но это довольно динамически определяет, живет ли ваш элемент внутри элемента с (например,) классом «yui3-pjax». Примечание. Я не проверяю, является ли элемент с классом «yui3-pjax» якорем, но вы можете добавить его в случае необходимости. Посмотрите скрипку http://jsfiddle.net/9L0jce6x/.

document.addEventListener('click', function(evt) { 
    if(elementOrParentsHaveClass(evt.target, 'yui3-pjax')){ 
     //do stuff 
    } 
}); 

//Recurse up the DOM until we find a parent with the given class, or return false if we don't 
function elementOrParentsHaveClass(elem, className){ 
    if(elem && elem.classList.contains(className)){ 
     return true; //yay! 
    }else{ 
     //Recurse only if parent exists 
     if(elem.parentNode){ 
      return elementOrParentsHaveClass(elem.parentNode, className); 
     } 
     else{ 
      //If the parent node does not exist, end recursion - we finished recursing up the DOM 
      return false; 
     } 
    } 
}