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 @click.stop="fun3" style="padding:5px; border:2px solid #BEBEBE;">
實驗結果：
點選div4，輸出如下：
實驗3
實驗1的基礎上，修改下代碼，如下，@click="fun4"改成@click.stop="fun4"
<div id="app" @click="fun1" style="padding:5px;border:2px solid #b7b766">
<div @click.stop="fun4" style="border:2px solid #8470FF;">div4</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即可
@click.native="logout">登出</el-dropdown-item>
作者：授客
QQ：1033553122
全國軟體測試QQ交流群：7156436
Git位址：https://gitee.com/ishouke
友情提示：限于時間倉促，文中可能存在錯誤，歡迎指正、評論！
作者五行缺錢，如果覺得文章對您有幫助，請掃描下邊的二維碼打賞作者，金額随意，您的支援将是我繼續創作的源動力，打賞後如有任何疑問，請聯系我!!!
微信打賞
支付寶打賞 全國軟體測試交流QQ群