如何阻止事件冒泡（事件对象方法）

今天药忘吃喽~ 2022-12-21 00:46 177阅读 0赞

## 如何阻止事件冒泡： ##

先看效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]  
*原理分析：*  
在添加监听事件的时候，某个事件发生会在元素结点之间按照特定的顺序传播，这个传播的过程就是DOM的事件流。  
形象的来说一个事件开始就像是一个石头扔到水里，从水面沉到水底后。再从水底出现泡泡自下而上冒出。

*核心方法如下：*

1.  方法里写上 e.stopPropagation();
2.  同时方法里要有参数，即事件对象e

`核心代码如下：`

<div class="father">
            <div class="son">son盒子</div>
        </div>
        <script>
            var father = document.querySelector('.father');
            var son = document.querySelector('.son');
            //第三个参数为false是冒泡，为true是捕获
            son.addEventListener('click',function (e) { 
                alert('点了son');
                e.stopPropagation();
            },false);
            father.addEventListener('click',function () { 
                alert('点了father');
            },false);
        </script>

`样式代码如下：`

* { 
                padding: 0;
                margin: 0;
            }
            .father { 
                width: 150px;
                height: 150px;
                margin: 200px auto;
                text-align: center;
                background-color: lightskyblue;
            }
            .son { 
                width: 100px;
                height: 100px;
                text-align: center;
                line-height: 100px;
                background-color: #ff6600;
            }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/e80e676844a2494397110d53031a5599.png