前端阻止事件冒泡的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(e){
    e.stopPropagation();
    alert("子盒子")
},
    //或者
clickSonBox(e){
     e.cancelBubble=true
     alert("子盒子")
   },

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

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