的JavaScript單擊事件處理

所以我附上事件到文檔時click事件上的特定錨發生一類yui3-pjax看，在某些情況下錨的跨度子元素。我怎麼能看到只是點擊事件氣泡只是錨點？我現在的if語句觀看的事件是：的JavaScript單擊事件處理

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類。我不知道如何處理來自該錨點的子元素或後代元素的事件的傳播/冒泡以實現該事件。

來源

2014-09-22 Knight Yoshi

請分享相應的HTML片段以及 – MarshallOfSound 2014-09-22 18:54:16

已添加。這是一個簡單的跨度元素，如果它只是錨點，我所要做的就是檢查事件目標是否有類，但由於某些實例會有一個跨度，目前我必須檢查跨度的父元素（同一個錨），當span元素存在時。 – 2014-09-22 19:05:03

而且我已經檢查東西，如YUI如何檢查YUI3-PJAX錨，以及如何引導處理上的元素的點擊，當他們點擊事件添加到文檔中，然後注意元素（在這種情況下，錨）但我還沒有弄清楚他們是如何在錨點上觀看事件的，我假設傳播/冒泡？ – 2014-09-22 19:07:31

希望我正確理解這一點。我不是爲某個類手動檢查元素和父元素，而是編寫一個函數來遞歸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; 
     } 
    } 
}

來源

2014-09-23 03:31:07

完美謝謝！我並沒有真正使用遞歸（直到現在我猜測都沒有找到需要），所以我沒有想到要使用它。 – 2014-09-23 03:47:20

的JavaScript單擊事件處理

回答

相關問題