VUE中如何實現(xiàn)阻止事件冒泡
如何阻止事件冒泡
當(dāng)父子元素中都有點擊事件的時候,為了讓觸發(fā)子元素中的事件時,不去觸發(fā)父元素中的事件,可以在子元素事件中添加stop來阻止事件冒泡。
如圖,在button的點擊事件中加上stop,觸發(fā)addStatus的時候,就不會去觸發(fā)父元素中的showColorStatus事件。
科普
.stop
是阻止冒泡行為,不讓當(dāng)前元素的事件繼續(xù)往外觸發(fā),如阻止點擊div內(nèi)部事件,觸發(fā)div事件.prevent
是阻止事件本身行為,如阻止超鏈接的點擊跳轉(zhuǎn),form表單的點擊提交.self
是只有是自己觸發(fā)的自己才會執(zhí)行,如果接受到內(nèi)部的冒泡事件傳遞信號觸發(fā),會忽略掉這個信號.capture
是改變js默認(rèn)的事件機制,默認(rèn)是冒泡,capture功能是將冒泡改為傾聽模式.once
是將事件設(shè)置為只執(zhí)行一次,如 .click.prevent.once 代表只阻止事件的默認(rèn)行為一次,當(dāng)?shù)诙斡|發(fā)的時候事件本身的行為會執(zhí)行.passive
滾動事件的默認(rèn)行為 (即滾動行為) 將會立即觸發(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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章

Vuex中mutations和actions的區(qū)別及說明

VUE3+Element-plus中el-form的使用示例代碼

vuejs2.0運用原生js實現(xiàn)簡單的拖拽元素功能示例