一文快速學會阻止事件冒泡的4種方法(原生js阻止,vue中使用修飾符阻止)

更新時間：2023年12月12日 10:53:32 作者：黃橘子panda

冒泡就是事件開始是由最具體的元素接收,然后逐層向上級傳播到較為不具體的元素,這篇文章主要給大家介紹了關于阻止事件冒泡的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事件發(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修飾符應該在父盒子綁定事件時使用而不是子盒子! 在父盒子事件使用self,點擊了子盒子，父盒子的點擊事件不會被觸發(fā)，即事件沒有冒泡,

self表示只在當前元素發(fā)生事件時，事件才觸發(fā)

總結

到此這篇關于阻止事件冒泡的4種方法(原生js阻止,vue中使用修飾符阻止)的文章就介紹到這了,更多相關前端阻止事件冒泡方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

十分鐘帶你讀懂Vue中的過濾器
過濾器提供給我們的一種數(shù)據(jù)處理方式。過濾器功能不是必須要使用的，因為它所實現(xiàn)的功能也能用計算屬性或者函數(shù)調(diào)用的方式來實現(xiàn)。這篇文章主要為大家介紹了Vue中過濾器的使用，需要的可以了解一下
2023-03-03
詳解解決Vue相同路由參數(shù)不同不會刷新的問題
這篇文章主要介紹了詳解解決Vue相同路由參數(shù)不同不會刷新的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
vue接口請求加密實例
這篇文章主要介紹了vue接口請求加密實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
詳解Vue-Router的安裝與使用
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。本文介紹下Vue Router的安裝與使用
2021-06-06
基于vue實現(xiàn)一個神奇的動態(tài)按鈕效果
今天我們將利用vue的條件指令來完成一個簡易的動態(tài)變色功能按鈕,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧
2019-05-05
element-plus的el-tree的雙向綁定示例代碼
這篇文章主要介紹了element-plus的el-tree的雙向綁定的示例代碼,代碼簡單易懂,結合圖文給大家展示,感興趣的朋友跟隨小編一起看看吧
2024-12-12
詳解在Vue中使用TypeScript的一些思考(實踐)
這篇文章主要介紹了詳解在Vue中使用TypeScript的一些思考(實踐)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
源碼剖析Vue3中如何進行錯誤處理
錯誤處理是框架設計的核心要素之一,框架的錯誤處理好壞,直接決定用戶應用程序的健壯性以及用戶開發(fā)應用時處理錯誤的心智負擔,本文將從源碼入手,剖析一下Vue3中是如何進行錯誤處理的,需要的可以參考下
2024-01-01
vue初始化動畫加載的實例
今天小編就為大家分享一篇vue初始化動畫加載的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue 本地環(huán)境判斷方式
這篇文章主要介紹了vue 本地環(huán)境判斷方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04