在讲解事件修饰符之前，大家先请看下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件修饰符</title>
</head>
<style>
.inner {
height: 150px;
background-color: darkcyan;
}
</style>
<body>
<div id="app">
<div class="inner" @click="divHandler">
<input type="button" value="点击" @click="btnHandler">
</div>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data:{},
methods:{
divHandler(){
console.log('这是触发了div的点击事件')
},
btnHandler(){
console.log('这是触发了btn的点击事件')
}
}
})
</script>
</body>
</html>
页面效果如下：
这时，我点击按钮，控制台会输出什么呢？
由于冒泡机制，先触发了里层元素（button）的点击事件，后触发了外层元素（div）的点击事件，今天要讲的不是冒泡机制，而是我们怎么实现点击按钮就只触发按钮的点击事件，点击div就只触发div的点击事件。这个功能用到的就是事件修饰符。
使用事件修饰符.stop可以阻止冒泡，使用方法如下：
<input type="button" value="点击" @click.stop="btnHandler">
即在@click后面加上.stop，这样在点击按钮的时候就不会触发div的点击事件了。
下面我们看一下其他事件修饰符：
.prevent
.prevent是阻止默认事件修饰符
设想一下需求：
<a href="http://lauyon.com" @click="linkClick">刘阳不吃饭</a>
linkClick(){
console.log('触发了链接的点击事件')
}
<a>标签的默认事件是跳转页面，我们点击这个<a>标签的时候，页面会直接跳转到网站http://lauyon.com，我们看不到console的输出。现在我们想看到console的输出，阻止<a>标签的默认事件触发。使用.prevent实现：
<a href="http://lauyon.com" @click.prevent="linkClick">刘阳不吃饭</a>
只需要在@click后面加上.prevent即可。
.capture
.capture实现的是捕获功能，设想如下场景：
<div class="inner" @click="divHandler">
<input type="button" value="点击" @click="btnHandler">
</div>
前面说到，由于冒泡原理，当点击按钮的时候，首先触发按钮的点击事件，然后执行div的点击事件。现在我们点击按钮的时候，想先执行div的点击事件，然后执行按钮的点击事件。这个时候就用到了我们的.capture，修改代码如下：
<div class="inner" @click.capture="divHandler">
<input type="button" value="点击" @click="btnHandler">
</div>
.self
还是上面的例子：
<div class="inner" @click="divHandler">
<input type="button" value="点击" @click="btnHandler">
</div>
当点击按钮的时候，触发了div的点击事件，div的点击事件是被动触发的。.self实现的功能是，只有当点击它（如这里的div）本身的时候才会触发，修改代码如下：
<div class="inner" @click.self="divHandler">
<input type="button" value="点击" @click="btnHandler">
</div>
.once
.once的意思是只触发一次，看下一段代码：
<a href="http://lauyon.com" @click.prevent.once="linkClick">刘阳不吃饭</a>
linkClick(){
console.log('触发了链接的点击事件')
}
这段代码执行后，第一次点击链接由于阻止了默认事件，控制台会打印触发了链接的点击事件，第二次点击链接则不会再阻止默认事件了。
总结：
.stop：阻止冒泡.prevent：阻止默认事件.capture：添加时间侦听器时使用事件捕获模式.self：只当事件在该元素本身（比如不是子元素）触发时触发回调.once：事件只触发一次
推荐阅读：
Vue系列教程（一）基础介绍
Vue系列教程（二）v-cloak、v-text、v-html的基本使用
Vue系列教程（三）v-bind指令
Vue系列教程（四）v-on指令定义事件
Vue系列教程（五）跑马灯效果案例
Vue系列教程（六）事件修饰符
Vue系列教程（七）v-model和双向数据绑定
扫一扫
865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
