stopPropagation()可以阻止事件在dom层次的传播,只要从事件捕获阶段到事件冒泡阶段遇到事件处理函数
实践测试
1.设置一个容器里面包含一个按钮
<div id="father">
<button id="son">按下我</button>
</div>
<style>
#father{
width: 200px;
height: 200px;
background: red;
}
</style>
2.给两个元素添加监听器
var father=document.getElementById('father');
var son=document.getElementById('son');
father.addEventListener("click",function(){
console.log("这是父元素");
},true);
son.addEventListener("click",function(event){
console.log("这是子元素");
},true);
事件触发就像一个v,我们再任何一个阶段设置了stopPropagation()就会掐断这个流程
3.在不同的阶段设置监听器和使用stopPropagation()
3.1将两个事件处理函数设置在捕获阶段
给 div元素设置stopPropagation(),点击button
给button元素设置stopPropagation(),点击button
两个元素都触发了,由于在冒泡阶段没有碰到stopPropagation(),所以事件会一直执行下去
3.2将两个事件处理函数设置在冒泡阶段
事件设置在冒泡阶段是一个相反的过程,但原理都是会阻止后续的触发,在这个阶段设置的阻止行为就和我们想要的效果一致。