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的网址。
注意：事件修饰符可以串联使用，也可以单独使用。