快速了解4种阻止事件冒泡的方法（原生js阻止，vue中使用修饰符阻止）

阻止事件冒泡的方法

前端结构

<div id="app">
    <div class="father-box" @click="clickFatherBox">
        我是父盒子
        <div class="son-box" @click="clickSonBox">
          我是子盒子
        </div>
    </div>
</div>

 methods: {
    
    
        clickSonBox(){
    
    
          alert("子盒子")
        },
        clickFatherBox(){
    
    
          alert("父盒子")
        }
},

事件冒泡：clickSonBox事件发生时clickFatherBox事件也被触发了

此时点击子盒子 对话框弹出两次

方法1：使用js阻止事件冒泡

clickSonBox(e){
    
    
    e.stopPropagation();
    alert("子盒子")
},
       
    //或者
    
clickSonBox(e){
    
    
     e.cancelBubble=true
     alert("子盒子")
   },

方法2：使用事件修饰符stop

绑定事件时，使用stop修饰符阻止事件冒泡

<div class="father-box" @click="clickFatherBox">我是父盒子
    <div class="son-box" @click.stop="clickSonBox">
      我是子盒子
    </div>
</div>

方法3：使用事件修饰符self

绑定事件时，使用self修饰符 表示只在本元素被点击时触发

<div class="father-box" @click.self="clickFatherBox">
     我是父盒子
     <div class="son-box" @click="clickSonBox">
       我是子盒子
     </div>
 </div>

注意：

self修饰符应该在父盒子绑定事件时使用而不是子盒子! 在父盒子事件使用self,点击了子盒子，父盒子的点击事件不会被触发，即事件没有冒泡,

self表示只在当前元素发生事件时，事件才触发