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