js事件阻止事件在dom层次的传播

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将两个事件处理函数设置在冒泡阶段

事件设置在冒泡阶段是一个相反的过程，但原理都是会阻止后续的触发，在这个阶段设置的阻止行为就和我们想要的效果一致。