一文快速學(xué)會阻止事件冒泡的4種方法(原生js阻止,vue中使用修飾符阻止)
更新時(shí)間：2023年12月12日 10:53:32 作者：黃橘子panda
冒泡就是事件開始是由最具體的元素接收,然后逐層向上級傳播到較為不具體的元素,這篇文章主要給大家介紹了關(guān)于阻止事件冒泡的4種方法,文中介紹的方法分別是原生js阻止以及vue中使用修飾符阻止的相關(guān)資料,需要的朋友可以參考下
阻止事件冒泡的方法
前端結(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)擊子盒子 對話框彈出兩次
方法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)擊事件不會被觸發(fā)，即事件沒有冒泡,
self表示只在當(dāng)前元素發(fā)生事件時(shí)，事件才觸發(fā)
總結(jié)
到此這篇關(guān)于阻止事件冒泡的4種方法(原生js阻止,vue中使用修飾符阻止)的文章就介紹到這了,更多相關(guān)前端阻止事件冒泡方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
過濾器提供給我們的一種數(shù)據(jù)處理方式。過濾器功能不是必須要使用的，因?yàn)樗鶎?shí)現(xiàn)的功能也能用計(jì)算屬性或者函數(shù)調(diào)用的方式來實(shí)現(xiàn)。這篇文章主要為大家介紹了Vue中過濾器的使用，需要的可以了解一下2023-03-03
這篇文章主要介紹了詳解解決Vue相同路由參數(shù)不同不會刷新的問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了vue接口請求加密實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。本文介紹下Vue Router的安裝與使用2021-06-06
基于vue實(shí)現(xiàn)一個(gè)神奇的動態(tài)按鈕效果
今天我們將利用vue的條件指令來完成一個(gè)簡易的動態(tài)變色功能按鈕,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-05-05
這篇文章主要介紹了element-plus的el-tree的雙向綁定的示例代碼,代碼簡單易懂,結(jié)合圖文給大家展示,感興趣的朋友跟隨小編一起看看吧2024-12-12
詳解在Vue中使用TypeScript的一些思考(實(shí)踐)
這篇文章主要介紹了詳解在Vue中使用TypeScript的一些思考(實(shí)踐)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
錯(cuò)誤處理是框架設(shè)計(jì)的核心要素之一,框架的錯(cuò)誤處理好壞,直接決定用戶應(yīng)用程序的健壯性以及用戶開發(fā)應(yīng)用時(shí)處理錯(cuò)誤的心智負(fù)擔(dān),本文將從源碼入手,剖析一下Vue3中是如何進(jìn)行錯(cuò)誤處理的,需要的可以參考下2024-01-01
今天小編就為大家分享一篇vue初始化動畫加載的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue 本地環(huán)境判斷方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04