事件修饰符
.stop
:阻止冒泡.prevent
:阻止默认事件.capture
:添加事件监听器使用事件捕获模式.self
:只当事件在该元素本身时回调.once
:事件仅触发一次
从一个例子出发:
<html>
<head>
<meta charset="utf-8">
</meta>
<title>事件修饰符</title>
<!-- 导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.inner {
height: 150px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="app">
<!-- 点击按钮则会出现冒泡事件机制,先触发btnhandler事件,再触发divhandler事件 -->
<div class="inner" @click="divhandler"><input type="button" value="戳他" @click="btnhandler"></div>
</div>
<script>
// 在vm实例中,如果想要获取data上的数据,或者想要调用methods中的方法,必须通过this.数据属性名或this.方法名来进行访问
var vm = new Vue({
el: "#app",
data: {
msg: "爱梦梦",
},
methods: {
divhandler() {
console.log("inner div点击事件...");
},
btnhandler() {
console.log("按钮点击事件")
}
}
})
</script>
</body>
</html>
点击按钮之后,则会出现默认的冒泡事件触发机制,先触发btnhandler
事件,再触发divhandler
事件。
1 阻止冒泡行为
<div class="inner" @click="divhandler"><input type="button" value="戳他" @click.stop="btnhandler"></div>
添加.stop
修饰符即可。
2 阻止默认行为
<a href="www.baidu.com" @click.prevent="linkClick">百度</a>
这样只会触发linkClick
事件,不会跳转。
3 捕获模式触发事件
<div class="inner" @click.capture="divhandler"><input type="button" value="戳他" @click="btnhandler"></div>
与冒泡模式相反,这样会先触发divhandler
事件,再触发btnhandler
事件。
4 只当事件在该元素本身时回调
<div class="inner" @click.self="divhandler">
<input type="button" value="戳他" @click="btnhandler">
</div>
此时点击按钮仅触发btnhandler
事件,点击div才触发divhandler
事件。
5 事件仅被触发一次
<div class="inner" @click.once="divhandler">
<input type="button" value="戳他" @click="btnhandler">
</div>
divhandler
事件仅被触发一次。
再如:
<a href="http://www.baidu.com" @click.once.prevent="divhandler">百度一下</a>
第一次会触发divhandler
事件,但不会跳转,第二次不会触发divhandler
事件,会跳转。