为什么不是我的事件冒泡

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> 

当我点击的文本，控制台只记录“孩子”。为什么click事件不会冒泡到parentNode #test？即使是html元素也无法获得点击事件。

任何人都可以解释什么问题是？

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>