如何阻止事件冒泡

當(dāng)父子元素中都有點(diǎn)擊事件的時(shí)候，為了讓觸發(fā)子元素中的事件時(shí)，不去觸發(fā)父元素中的事件，可以在子元素事件中添加stop來(lái)阻止事件冒泡。

如圖，在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功能是將冒泡改為傾聽(tīng)模式
• .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()方法。

方法二

可以自己寫(xiě)個(gè)阻止冒泡事件 然后在發(fā)生冒泡的元素中調(diào)用這個(gè)事件

@click="_stopPropagation($event)"

methods：{ ? ? ?
? ? _stopPropagation(ev){ ? ? ?
? ? ? ? var _this = this; ? ? ?
? ? ? ? ev.stopPropagation(); ? ? ?
? ? },
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。