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