JavaScript单击事件处理

Question

因此，我将一个事件附加到文档，以观察在具有类yui3-pjax的特定锚点上发生单击事件yui3-pjax ，在某些情况下，锚点具有span子元素。 我怎么能只看到点击事件气泡到锚点？ 我目前关于观看活动的if语句是：

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;
        }
    }
}