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