快捷導(dǎo)航

一文快速學(xué)會(huì)阻止事件冒泡的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)擊事件不會(huì)被觸發(fā)，即事件沒有冒泡,

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

Vue 解決通過this.$refs來獲取DOM或者組件報(bào)錯(cuò)問題
這篇文章主要介紹了Vue 解決通過this.$refs來獲取DOM或者組件報(bào)錯(cuò)問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡版
本篇文章主要介紹了詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡版，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-04-04
vue+echarts實(shí)現(xiàn)可拖動(dòng)節(jié)點(diǎn)的折線圖（支持拖動(dòng)方向和上下限的設(shè)置）
制作一個(gè)折線圖用于顯示當(dāng)前24小時(shí)的數(shù)據(jù)，并且可以通過拖動(dòng)折現(xiàn)圖設(shè)置數(shù)據(jù)，接下來通過本文給大家分享vue+echarts實(shí)現(xiàn)可拖動(dòng)節(jié)點(diǎn)的折線圖（支持拖動(dòng)方向和上下限的設(shè)置），感興趣的朋友跟隨一起學(xué)習(xí)吧
2019-04-04
vue3?使用defineExpose的實(shí)例詳解
這篇文章主要介紹了vue3?使用defineExpose的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-03-03
Vue使用axios(Ajax)+ElementUI實(shí)現(xiàn)登錄實(shí)踐
本文介紹了如何使用Vue和ElementUI框架創(chuàng)建一個(gè)登錄頁面,并實(shí)現(xiàn)前后端交互,同時(shí),還討論了跨域問題的解決方案以及ES6中的箭頭函數(shù)
2026-03-03
vue3利用customRef實(shí)現(xiàn)防抖
防抖就是對于頻繁觸發(fā)的事件添加一個(gè)延時(shí)同時(shí)設(shè)定一個(gè)最小觸發(fā)間隔,防抖大家都學(xué)過,但是如何在?Vue3?里中將防抖做到極致呢,下面小編就來和大家詳細(xì)講講
2023-10-10
詳解vue-admin和后端(flask)分離結(jié)合的例子
本篇文章主要介紹了詳解vue-admin和后端(flask)分離結(jié)合的例子，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-02-02
前端小技能之Vue集成百度離線地圖功能總結(jié)
最近項(xiàng)目里集成了百度地圖的一些功能,所以下面這篇文章主要給大家介紹了關(guān)于前端小技能之Vue集成百度離線地圖功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
Vue是怎么渲染template內(nèi)的標(biāo)簽內(nèi)容的
這篇文章主要介紹了Vue是怎么渲染template內(nèi)的標(biāo)簽內(nèi)容的，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
Vue監(jiān)聽屬性圖文實(shí)例詳解
監(jiān)聽屬性可以針對某個(gè)屬性進(jìn)行監(jiān)聽,當(dāng)監(jiān)聽的屬性的值發(fā)生了變化,則會(huì)執(zhí)行相應(yīng)的函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue監(jiān)聽屬性的相關(guān)資料,需要的朋友可以參考下
2021-11-11