VUE中如何實(shí)現(xiàn)阻止事件冒泡
更新時(shí)間：2022年08月31日 14:07:52 作者：得知此事須躬行
這篇文章主要介紹了VUE中如何實(shí)現(xiàn)阻止事件冒泡，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
如何阻止事件冒泡
當(dāng)父子元素中都有點(diǎn)擊事件的時(shí)候，為了讓觸發(fā)子元素中的事件時(shí)，不去觸發(fā)父元素中的事件，可以在子元素事件中添加stop來阻止事件冒泡。
如圖，在button的點(diǎn)擊事件中加上stop，觸發(fā)addStatus的時(shí)候，就不會(huì)去觸發(fā)父元素中的showColorStatus事件。
科普
.stop是阻止冒泡行為,不讓當(dāng)前元素的事件繼續(xù)往外觸發(fā),如阻止點(diǎn)擊div內(nèi)部事件,觸發(fā)div事件.prevent是阻止事件本身行為,如阻止超鏈接的點(diǎn)擊跳轉(zhuǎn),form表單的點(diǎn)擊提交.self是只有是自己觸發(fā)的自己才會(huì)執(zhí)行,如果接受到內(nèi)部的冒泡事件傳遞信號(hào)觸發(fā),會(huì)忽略掉這個(gè)信號(hào).capture是改變js默認(rèn)的事件機(jī)制,默認(rèn)是冒泡,capture功能是將冒泡改為傾聽模式.once是將事件設(shè)置為只執(zhí)行一次,如 .click.prevent.once 代表只阻止事件的默認(rèn)行為一次,當(dāng)?shù)诙斡|發(fā)的時(shí)候事件本身的行為會(huì)執(zhí)行.passive滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā)，而不會(huì)等待 onScroll 完成。這個(gè) .passive 修飾符尤其能夠提升移動(dòng)端的性能。
阻止click事件冒泡(防止觸發(fā)另一個(gè)事件)的方法
方法一
使用vue阻止子級(jí)元素的click事件冒泡。簡(jiǎn)單得：可以直接用stop
<div @click="test1()"> ? ? ? ? <span @click.stop="test2()">按鈕1</span> ? ? ? ? <span>按鈕2</span>? </div>
這樣點(diǎn)擊div里面的按鈕1，就不會(huì)觸發(fā)div綁定時(shí)間test1()方法。
方法二
可以自己寫個(gè)阻止冒泡事件 然后在發(fā)生冒泡的元素中調(diào)用這個(gè)事件
@click="_stopPropagation($event)"
methods：{ ? ? ?
? ? _stopPropagation(ev){ ? ? ?
? ? ? ? var _this = this; ? ? ?
? ? ? ? ev.stopPropagation(); ? ? ?
? ? },
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue 動(dòng)態(tài)組件與全局事件綁定總結(jié)
這篇文章主要介紹了詳解Vue 動(dòng)態(tài)組件與全局事件綁定總結(jié)，從示例中發(fā)現(xiàn)并解決問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
vue中的路由跳轉(zhuǎn)tabBar圖片和文字的高亮效果
這篇文章主要介紹了vue中的路由跳轉(zhuǎn)tabBar圖片和文字的高亮效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
淺談vue項(xiàng)目可以從哪些方面進(jìn)行優(yōu)化
本篇文章主要介紹了淺談vue項(xiàng)目可以從哪些方面進(jìn)行優(yōu)化，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要給大家介紹了關(guān)于vue打包上傳服務(wù)器刷新404問題的兩種方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Vue3+Element-Plus實(shí)現(xiàn)左側(cè)菜單折疊與展開功能示例
本文主要介紹了Vue3+Element-Plus實(shí)現(xiàn)左側(cè)菜單折疊與展開功能示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue.js實(shí)現(xiàn)單選框、復(fù)選框和下拉框示例
本篇文章主要介紹了vue.js實(shí)現(xiàn)單選框、復(fù)選框和下拉框示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家介紹了Vue中$refs和$nextTick的使用方法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下2022-03-03
elementui的el-popover修改樣式不生效的解決
在使用element-ui的時(shí)候，有一個(gè)常用的組件，那就是el-popover，本文就介紹一下elementui的el-popover修改樣式不生效的解決方法，感興趣的可以了解一下2021-06-06
基于vue2框架的機(jī)器人自動(dòng)回復(fù)mini-project實(shí)例代碼
本篇文章主要介紹了基于vue2框架的機(jī)器人自動(dòng)回復(fù)mini-project實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-06
本篇文章主要介紹了Vue 中批量下載文件并打包的示例代碼，用 ajax 將文件下載, 然后用 jszip 壓縮文件, 最后用 file-saver 生成文件，有興趣的可以了解一下2017-11-11