即使使用 stopPropagation，事件也会冒泡到父级？

Question

停止传播不是停止向父元素冒泡吗？

我知道在这种情况下要检查事件目标，我只是想知道为什么 stopPropagation 这个词本身就带有防止这个问题的味道，却没有那样执行。

var child = document.querySelector('.parent')
    .addEventListener('click',function(e){
        e.stopPropagation();
        $(this.querySelector('.child')).toggleClass('selected');
        console.log(e);
    },
false);

.society {
  padding:10px;
  background-color:green;
  position:relative;
}

.parent {
  background-color:red;
  width:60%;
  margin-left:30%;
}

.child {
  width: 100%;
  background-color:pink;
  position:absolute;
  top:0;
  left:0;
  width:0;
  max-width:0px;
  max-height:0px;
  transition: max-width 1s, max-height 1s;
  overflow:hidden;
}

.child.selected {
  top:0;
  left:0;
  width:100%;
  max-width:1000px;
  max-height:1000px;
}

<div class="society">
  <div class="parent">
     parent
    <div class="child">
      child
    </div>
  </div>
</div>

Answer 1

是的，这正是它的作用！

您的代码侦听对具有父元素 class 的元素的点击，并切换所有具有子元素 class 的选定 class。这不是本意吗？

如果您使用 stopPropagation 为子项添加事件，父项点击将不会触发：

var parent = document.querySelector('.parent').addEventListener('click',function(e){
    e.stopPropagation();
  $(this.querySelector('.child')).toggleClass('selected');
  console.log(e);
},false);
var child = document.querySelector('.child').addEventListener('click',function(e){
    e.stopPropagation();
  $(this).toggleClass('selected');
  console.log(e);
},false);

Answer 2

如果您想阻止对 .child 的点击传播，您必须在 .child 上绑定一个 click 处理程序：

document.getElementById('parent').addEventListener('click', function(e) {
  alert('parent');
}, false);

document.getElementById('child').addEventListener('click', function(e) {
  alert('child');
  e.stopPropagation(); // if this isn't called, you'll get 2 alerts when clicking on #child
}, false);

#parent { background-color: yellow; }

#child { background-color: red; }

<div id="parent">
  Parent
  <div id="child">
    Child
  </div>
</div>

即使使用 stopPropagation，事件也会冒泡到父级？

Event is bubbling to parent even with stopPropagation?

javascript

event-bubbling

event-propagation

stoppropagation