快捷導(dǎo)航

vue項(xiàng)目遇見(jiàn)事件冒泡該如何處理詳解

更新時(shí)間：2023年04月26日 09:30:11 作者：fury_123

冒泡事件處理是由內(nèi)而外發(fā)生的,例如有兩個(gè)父子div,給他們分別寫上點(diǎn)擊事件,點(diǎn)擊子div先響應(yīng)的是子div,再是父div,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目遇見(jiàn)事件冒泡該如何處理的相關(guān)資料,需要的朋友可以參考下

開(kāi)發(fā)環(huán)境

Win 10
element-ui "2.8.2"
Vue 2.9.6

事件冒泡簡(jiǎn)介

如下圖，當(dāng)我們點(diǎn)擊頁(yè)面某個(gè)元素時(shí)，會(huì)產(chǎn)生點(diǎn)擊事件，事件由外到內(nèi)，逐層遞進(jìn)（事件捕獲階段，途中的1->2->3->4），當(dāng)目標(biāo)元素捕捉到目標(biāo)事件時(shí)，會(huì)響應(yīng)事件，并由內(nèi)到外，逐層往外傳遞(事件冒泡階段，圖中的4->5->6->7)，這便是事件冒泡。正式因?yàn)槊芭輽C(jī)制，當(dāng)用戶點(diǎn)擊圖中目標(biāo)元素div時(shí)，5,6,7事件區(qū)的元素都會(huì)響應(yīng)點(diǎn)擊事件（如果具備響應(yīng)事件能力的話）

實(shí)驗(yàn)1

<template>
????<div>
????????<div?id="app"?@click="fun1"?style="padding:5px;border:2px?solid?#b7b766">
????????????div1
????????????<div?@click="fun2"?style="padding:5px;border:2px?solid?#79CDCD;">
????????????????div2
????????????????<div?@click="fun3"?style="padding:5px;?border:2px?solid?#BEBEBE;">
????????????????????div3
????????????????????<div?@click="fun4"?style="border:2px?solid?#8470FF;">div4</div>
????????????????</div>
????????????</div>
????????</div>
????</div>
</template>
<script>
export?default?{
????methods:?{
????????fun1()?{
????????????console.log("點(diǎn)擊了div1");
????????},
????????fun2()?{
????????????console.log("點(diǎn)擊了div2");
????????},
????????fun3()?{
????????????console.log("點(diǎn)擊了div3");
????????},
????????fun4()?{
????????????console.log("點(diǎn)擊了div4");
????????}
????}
????
};
</script>

實(shí)驗(yàn)結(jié)果如下：

實(shí)驗(yàn)2

實(shí)驗(yàn)1的基礎(chǔ)上，修改下代碼，如下，@click ="fun3"改成@click.stop="fun3"

????????<div?id="app"?@click="fun1"?style="padding:5px;border:2px?solid?#b7b766">
????????????div1
????????????<div?@click="fun2"?style="padding:5px;border:2px?solid?#79CDCD;">
????????????????div2
????????????????<div?@click.stop="fun3"?style="padding:5px;?border:2px?solid?#BEBEBE;">
????????????????????div3
????????????????????<div?@click="fun4"?style="border:2px?solid?#8470FF;">div4</div>
????????????????</div>
????????????</div>
????????</div>

實(shí)驗(yàn)結(jié)果：

點(diǎn)擊div4，輸出如下：

實(shí)驗(yàn)3

實(shí)驗(yàn)1的基礎(chǔ)上，修改下代碼，如下，@click="fun4"改成@click.stop="fun4"

???????<div?id="app"?@click="fun1"?style="padding:5px;border:2px?solid?#b7b766">
????????????div1
????????????<div?@click="fun2"?style="padding:5px;border:2px?solid?#79CDCD;">
????????????????div2
????????????????<div?@click="fun3"?style="padding:5px;?border:2px?solid?#BEBEBE;">
????????????????????div3
????????????????????<div?@click.stop="fun4"?style="border:2px?solid?#8470FF;">div4</div>
????????????????</div>
????????????</div>
????????</div>

實(shí)驗(yàn)結(jié)果：