vue中的事件修飾符
-
- 事件修飾符是什麼
- 不同的事件修飾符
-
- .stop事件修飾符
- .prevent事件修飾符
- .capture事件修飾符
- .self事件修飾符
- .once事件修飾符
事件修飾符是什麼
vue中的事件修飾符用于控制事件的标簽範圍和标簽的預設事件，比如點選事件的冒泡行為和a标簽的href預設點選跳轉事件。
不同的事件修飾符
.stop事件修飾符
.stop作用：阻止冒泡
首先，我們需要了解什麼是事件冒泡。事件冒泡是指多個标簽元素嵌套時，點選（或者其他事件）内部标簽，也會觸發外部包裹标簽的點選事件。比如下面這個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
<style>
.out {
background-color: lightcoral;
padding: 150px;
}
.inner {
height: 300px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="app">
<div class="out" @click="outHandler">
<div class="inner" @click="innerHandler">
<button @click="btnHandler">點我</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
},
methods: {
btnHandler() {
console.log("觸發按鈕點選事件");
},
innerHandler() {
console.log("觸發内部div點選事件");
},
outHandler() {
console.log("觸發外部div點選事件");
}
}
});
</script>
</body>
</html>
但是，當我們對内部标簽事件添加.stop事件修飾符時，則會阻止事件向外冒泡。
.prevent事件修飾符
prevent作用：阻止預設事件
比如a标簽的點選跳轉預設事件和我們定義的點選事件向沖突時，可以使用該事件修飾符進行阻止，使用方式和stop修飾符一緻，也是在事件後加上.prevent
.capture事件修飾符
.capture作用：将冒泡事件中的加.capture修飾符的事件提前到第一個執行。（官方解釋：添加時間偵聽器時使用事件捕獲模式）
<div class="out" @click="outHandler">
<div class="inner" @click.capture="innerHandler">
<button @click="btnHandler">點我</button>
</div>
</div>
.self事件修飾符
隻當事件在該元素本身（比如不是子元素）觸發時觸發回調
<div class="out" @click="outHandler">
<div class="inner" @click.self="innerHandler">
<button @click="btnHandler">點我</button>
</div>
</div>
可以發現，點選子元素，并不會觸發内部div的回調函數
.once事件修飾符
.once作用：事件隻能觸發一次
第一次點選觸發aHandler事件，第二次@click點選事件失效，跳轉到href的網址。
注意：事件修飾符可以串聯使用，也可以單獨使用。