为什么我的活动没有冒泡

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>