為什么我的活動沒有冒泡

Question

這是一些演示代碼：

<div id="test">
    <div class="child">
        click
    </div>
</div>
<script>
   document.addEventListener('click', function (e) {
       if(e.target.classList.contains('child')){
           console.log('child')
       }
       if(e.target.id==='test'){
           console.log('test')
       }
       if(e.target.tagName === 'HTML'){
           console.log('html')
       }
   }, false)
</script>

當我單擊文本時，控制台僅記錄'child'。 為什么click事件沒有冒泡到parentNode #test？ 即使是html元素也無法獲得click事件。

任何人都可以解釋問題是什么？

Answer 1

事件正在冒泡，這就是注冊到文檔對象的句柄被觸發的原因。 文檔對象是dom中最頂層的對象，即它是html元素的父對象。 如果沒有發生冒泡，那么處理程序就不會被調用。

但是在所有處理程序中， Event.target將引用事件開始的原始元素，這就是為什么它總是引用子元素

對調度事件的對象的引用。 在事件的冒泡或捕獲階段調用事件處理程序時，它與event.currentTarget不同。

如果要測試祖先元素，則需要從事件目標遍歷並查看是否滿足條件

 document.addEventListener('click', function(e) { var target = e.target; while (target) { if (target.classList.contains('child')) { snippet.log('child') } if (target.id === 'test') { snippet.log('test') } if (target.tagName === 'HTML') { snippet.log('html') } target = target.parentNode; } }, false) 

 <!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> <div id="test"> <div class="child"> click </div> </div>