Vue 阻止事件冒泡
by:授客 QQ：1033553122
開發環境
Win 10
element-ui "2.8.2"
Vue 2.9.6
事件冒泡簡介
如下圖，當我們點擊頁面某個元素時，會產生點擊事件，事件由外到內，逐層遞進（事件捕獲階段，途中的1->2->3->4），當目標元素捕捉到目標事件時，會響應事件，並由內到外，逐層往外傳遞(事件冒泡階段，圖中的4->5->6->7)，這便是事件冒泡。正式因為冒泡機制，當用戶點擊圖中目標元素div時，5,6,7事件區的元素都會響應點擊事件（如果具備響應事件能力的話）
實驗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>
實驗結果：
結論
綜合實驗1,2,3可知，如果想阻止哪個元素的事件冒泡（即事件只針對該元素有效），只要給該元素的事件增加.stop修飾符即可。
應用場景舉例
如下，點擊表格中記錄行時，會打開進入計划對話框，點擊“關聯用例”，希望打開關聯用例對話框，但是因為事件冒泡，也會打開進入計划對話框，這不是我們想要的結果，此時就可以給“關聯用例”按鈕設置@click.stop，這樣就只會打開關聯用例對話框。
事件修飾符
除了.stop之外，Vue v-on還提供了其它事件修飾符
.once
只響應事件一次，例如@click.once="fun4"，表示僅第一次點擊才會執行fun4
這里， @event等同於v-on:event，vue事件綁定的兩種格式。
.self
僅當事件由元素自身（比如不是子元素）觸發時，才響應事件。例如，上述實驗1的基礎上，修改@click="fun3"為@click.self="fun3",那么，點擊div4所在div時，div3所在div不會回調fun3,即不會響應點擊事件
.prevent
某些元素(如帶href屬性的超鏈接元素a)擁有自身的默認事件（事件冒泡結束之后開始執行，並且不受.stop影響）,如果不希望元素響應默認事件，可以給元素事件增加.prevent。常見的屏蔽右鍵默認菜單
.passive
每次事件產生，瀏覽器都會去查詢一下是否調用了preventDefault阻止該次事件的默認動作,為事件設置.passive修飾符就是為了告訴瀏覽器，不用查詢了，我們沒用preventDefault阻止默認動作。
.capture
表示在“事件捕獲階段”監聽事件，即在事件捕獲階段回調事件處理函數。例如，在上述實驗1的基礎上，修改@click="fun3"為@click.capture="fun3",點擊div4時，將輸出如下
.native
用於在某個組件的根元素上監聽一個原生事件。例如:
<your-component v-on:click.native="callbackFunction"></my-component>
筆者使用ElementUI框架時遇到一個問題，給<el-dropdown-item>組件元素添加@click不起作用，如下：
<el-dropdown-menu slot="dropdown">
...略
<el-dropdown-item @click="logout">退出登錄</el-dropdown-item>
</el-dropdown-menu>
解決方法，給事件添加.native修飾符，替換 @click 為 @click.native即可
<el-dropdown-menu slot="dropdown">
...略
<el-dropdown-item @click.native="logout">退出登錄</el-dropdown-item>
</el-dropdown-menu>