event.stopPropagation() 阻止捕获和冒泡阶段中当前事件的进一步传播。

在这之前先说一下事件触发的原理

 事件触发原理

 事件触发整体有三个阶段构成:捕获阶段 -> 目标阶段(不显示) -> 冒泡阶段(默认)

        捕获阶段是由外向内

        冒泡阶段是由内向外

捕获阶段    目标阶段    冒泡阶段

            外                    内

             |                        |

            内                    外

接下来用4个嵌套的div举例说明

    <div class="div1">div1
        <div class="div2">div2
            <div class="div3">div3
                <div class="div4">div4</div>
            </div>
        </div>
    </div>

 具体css代码不做展示,效果图如下:

 

JavaScript代码如下:

        var div1=document.querySelector(".div1");
        var div2=document.querySelector(".div2");
        var div3=document.querySelector(".div3");
        var div4=document.querySelector(".div4");

        div1.addEventListener("click",clickhandler1);
        div2.addEventListener("click",clickhandler2);
        div3.addEventListener("click",clickhandler3);
        div4.addEventListener("click",clickhandler4);
        
        function clickhandler1(e){
            console.log("div1")
        }
        function clickhandler2(e){
            console.log("div2")
          
        }
        function clickhandler3(e){
            console.log("div3)
    
        }
        function clickhandler4(e){
            console.log("div4)
           
        }

 event.stopPropagation() 阻止捕获和冒泡阶段中当前事件的进一步传播。

        说白了就是当侦听的事件是捕获时,阻断的就是捕获过程,当侦听的事件是冒泡时,阻断的就是冒泡过程

1. 接下来看第一个例子,当设置div3是冒泡时,也就是默认值false

        div1.addEventListener("click",clickhandler1);
        div2.addEventListener("click",clickhandler2);
        div3.addEventListener("click",clickhandler3,false);
        div4.addEventListener("click",clickhandler4);

那当阻断div3时,点击div4时

        function clickhandler1(e){
            console.log("div1")
        }
        function clickhandler2(e){
            console.log("div2")
          
        }
        function clickhandler3(e){
            console.log("div3")
            e.stopPropagation(); //阻止冒泡事件进一步传播
        }
        function clickhandler4(e){
            console.log("div4")
            
        }

那输出的结果就是

因为,所有的div都设置侦听的是冒泡阶段，所以捕获阶段不触发，冒泡输出结果从内往外输出,应该是div4->div3->div2->div1

但是在div3用了e.stopPropagation()阻止了冒泡进一步传播,所以只输出了div4->div3

2、当设置四个div都是侦听捕获阶段时，当阻断div3时,点击div4时

        div1.addEventListener("click",clickhandler1,true);
        div2.addEventListener("click",clickhandler2,true);
        div3.addEventListener("click",clickhandler3,true);
        div4.addEventListener("click",clickhandler4,true);
        
        function clickhandler1(e){
            console.log("div1")
        }
        function clickhandler2(e){
            console.log("div2")
          
        }
        function clickhandler3(e){
            console.log("div3")
            e.stopPropagation(); 
        }
        function clickhandler4(e){
            console.log("div4")
            // e.stopPropagation(); 
        }

 输出结果应是

 因为侦听的四个div都是捕获阶段，所以应该由外向内，输出的是div1 -> div2 -> div3 ->div4

但是div3用e.stopPropagation()阻止了捕获的进一步传播，所以只输出div1 -> div2 -> div3

3、第三个例子，设置div1，div3侦听的是冒泡阶段，div2，div4侦听的是捕获阶段，那么当设置阻断div3时

        div1.addEventListener("click",clickhandler1);
        div2.addEventListener("click",clickhandler2,true);
        div3.addEventListener("click",clickhandler3);
        div4.addEventListener("click",clickhandler4,true);
        
        function clickhandler1(e){
            console.log("div1")
        }
        function clickhandler2(e){
            console.log("div2")
          
        }
        function clickhandler3(e){
            console.log("div3")
            e.stopPropagation(); 
        }
        function clickhandler4(e){
            console.log("div4")
            
        }

这个时候四个div有捕获阶段，也有冒泡阶段，优先捕获阶段，也就是先输出捕获阶段div2、div4，后输出冒泡阶段div3、div1

注意，捕获阶段由外向内，所以输出的是div2 -> div4

冒泡阶段由内向外，所以输出的是div3 -> div1

 

所以最后输出应该是div2 -> div4 -> div3 -> div1

但是div3用e.stopPropagation()阻止了冒泡的进一步传播，所以输出结果应该是div2 -> div4 -> div3

 

那么同理 如果设置div1，div3侦听的是捕获阶段，div2，div4侦听的是冒泡阶段，那么当设置阻断div3时

        div1.addEventListener("click",clickhandler1,true);
        div2.addEventListener("click",clickhandler2);
        div3.addEventListener("click",clickhandler3,true);
        div4.addEventListener("click",clickhandler4);
        
        function clickhandler1(e){
            console.log("div1")
        }
        function clickhandler2(e){
            console.log("div2")
          
        }
        function clickhandler3(e){
            console.log("div3")
            e.stopPropagation(); 
        }
        function clickhandler4(e){
            console.log("div4")
            
        }

这个时候同样四个div有捕获阶段，也有冒泡阶段，优先捕获阶段，也就是先输出捕获阶段div1、div3，后输出冒泡阶段div4、div2

再次注意，捕获阶段由外向内，所以输出的是div1 -> div3

冒泡阶段由内向外，所以输出的是div4 -> div2

所以最后输出应该是div1 -> div3 -> div4 -> div2

但是div3用e.stopPropagation()阻止了捕获的进一步传播，所以输出结果应该是div1 -> div3

---

 简单总结一些注意点：

因为上边的例子都是点击最里层的元素div4，所以根据事件的触发原理：捕获阶段 -> 目标阶段(不显示) -> 冒泡阶段(默认)

点击的是div4，所以目标阶段就是div4，捕获阶段就是有外向内，div1 -> div2 -> div3 -> div4

冒泡阶段是由内向外div4 -> div3 -> div2 -> div1,

所以整个点击div4事件的原理就是：

捕获阶段由外向内（div1 -> div2 -> div3 -> div4） -> 目标div4  ->  冒泡阶段由内向外（div4 -> div3 -> div2 -> div1）

设置在哪个阶段 侦听，就获取哪个阶段的元素或方法，侦听捕获阶段1，3，就获取div1，div3

侦听冒泡阶段2，4，就获取div4，div2

千万注意捕获阶段和冒泡阶段的顺序！

e.stopPropagation() 就是阻止之后的冒泡或者捕获继续传播，说白了就是截断，不再侦听

---

后续有什么不懂可以私聊我，或者评论

最后大家可以试着想一下，当点div1，div2，div3时输出div1，点div4时，输出div4。这样该怎么实现？