阻止事件冒泡的方法
前端結(jié)構(gòu)
<div id="app">
<div class="father-box" @click="clickFatherBox">
我是父盒子
<div class="son-box" @click="clickSonBox">
我是子盒子
</div>
</div>
</div>
methods: {
clickSonBox(){
alert("子盒子")
},
clickFatherBox(){
alert("父盒子")
}
},
事件冒泡：clickSonBox事件發(fā)生時(shí)clickFatherBox事件也被觸發(fā)了
此時(shí)點(diǎn)擊子盒子 對(duì)話框彈出兩次
方法1：使用js阻止事件冒泡
clickSonBox(e){
e.stopPropagation();
alert("子盒子")
},
//或者
clickSonBox(e){
e.cancelBubble=true
alert("子盒子")
},
方法2：使用事件修飾符stop
綁定事件時(shí)，使用stop修飾符阻止事件冒泡
<div class="father-box" @click="clickFatherBox">我是父盒子
<div class="son-box" @click.stop="clickSonBox">
我是子盒子
</div>
</div>
方法3：使用事件修飾符self
綁定事件時(shí)，使用self修飾符 表示只在本元素被點(diǎn)擊時(shí)觸發(fā)
<div class="father-box" @click.self="clickFatherBox">
我是父盒子
<div class="son-box" @click="clickSonBox">
我是子盒子
</div>
</div>
注意：
self修飾符應(yīng)該在父盒子綁定事件時(shí)使用而不是子盒子! 在父盒子事件使用self,點(diǎn)擊了子盒子，父盒子的點(diǎn)擊事件不會(huì)被觸發(fā)，即事件沒有冒泡,文章來源：http://www.zghlxwxcb.cn/news/detail-589488.html
self表示只在當(dāng)前元素發(fā)生事件時(shí)，事件才觸發(fā)文章來源地址http://www.zghlxwxcb.cn/news/detail-589488.html
到了這里，關(guān)于快速了解4種阻止事件冒泡的方法（原生js阻止，vue中使用修飾符阻止）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
