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

<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>

js腳本如下：

export default { methods: { fun1() { console.log("點擊了div1"); }, fun2() { console.log("點擊了div2"); }, fun3() { console.log("點擊了div3"); }, fun4() { console.log("點擊了div4"); } } };

實驗結果如下：

實驗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，輸出如下：

實驗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>

實驗結果：

綜合實驗1,2,3可知，如果想阻止哪個元素的事件冒泡（即事件隻針對該元素有效），隻要給該元素的事件增加.stop修飾符即可。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!