vue項目遇見事件冒泡該如何處理詳解

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

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

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

Win 10
element-ui "2.8.2"
Vue 2.9.6

事件冒泡簡介

如下圖，當我們點擊頁面某個元素時，會產(chǎn)生點擊事件，事件由外到內(nèi)，逐層遞進（事件捕獲階段，途中的1->2->3->4），當目標元素捕捉到目標事件時，會響應事件，并由內(nèi)到外，逐層往外傳遞(事件冒泡階段，圖中的4->5->6->7)，這便是事件冒泡。正式因為冒泡機制，當用戶點擊圖中目標元素div時，5,6,7事件區(qū)的元素都會響應點擊事件（如果具備響應事件能力的話）

實驗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("點擊了div1");
????????},
????????fun2()?{
????????????console.log("點擊了div2");
????????},
????????fun3()?{
????????????console.log("點擊了div3");
????????},
????????fun4()?{
????????????console.log("點擊了div4");
????????}
????}
????
};
</script>

實驗結果如下：

實驗2

實驗1的基礎上，修改下代碼，如下，@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>

實驗結果：

點擊div4，輸出如下：

實驗3

實驗1的基礎上，修改下代碼，如下，@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>

實驗結果：