Vue中事件绑定使用= v-on
指令,指令后可跟事件修饰符,Vue提供以下修饰符:
.stop
- 调用 event.stopPropagation()。
.prevent
- 调用 event.preventDefault()。
.capture
- 添加事件侦听器时使用 capture 模式。
.self
- 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias}
- 只当事件是从特定键触发时才触发回调。
.native
- 监听组件根元素的原生事件。
.once
- 只触发一次回调。
.left
- 只当点击鼠标左键时触发。
.right
- 只当点击鼠标右键时触发。
.middle
- 只当点击鼠标中键时触发。
.passive
- 以 { passive: true } 模式添加侦听器
修饰符使用方法,如:
<button @click.stop="doThis"></button>
修饰符还可以串联使用,如:
<button @click.stop.prevent="doThis"></button>
下文将具体描述部分修饰符使用方法
.stop用来防止冒泡,我们先来看看冒泡的场景
<div id="app">
<div @click="onDivClick">
<input type="button" value="点击" @click="onButtonClick">
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data: { },
methods: {
onDivClick() {
console.log('这是触发了 DIV 的点击事件')
},
onButtonClick() {
console.log('这是触发了 BUTTON按钮 的点击事件')
}
}
})
</script>
页面操作效果:
从上图中,我们发现点击按钮的时候不仅触发了按钮本身绑定的方法,其父级(DIV)绑定的方法也触发了。
如果不想让实践冒泡,那么我们可以使用修饰符 .stop
来解决这个问题,具体如下:
<div id="app">
<div @click="onDivClick">
<input type="button" value="点击" @click.stop="onButtonClick">
</div>
</div>
<a href="http://www.baidu.com" @click="onAClick">点击我跳转到百度</a>
<script>
methods: {
onAClick() {
console.log('点击了连接')
}
}
</script>
见上面代码,点击连接之后页面跳转到百度首页。 如果不希望点击跳转到百度,那么久需要组织 a
标签点击的默认事件,这时可使用修饰符 .prevent
<a href="http://www.baidu.com" @click.prevent="onAClick">点击我跳转到百度a>
实现捕获触发事件的机制,即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。
就是谁有该事件修饰符,就先触发谁。
<div id="app">
<div @click="onDivClick">
<input type="button" value="点击" @click="onButtonClick">
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data: { },
methods: {
onDivClick() {
console.log('这是触发了 DIV 的点击事件')
},
onButtonClick() {
console.log('这是触发了 BUTTON按钮 的点击事件')
}
}
})
</script>
运行效果见上面.stop
示例图片。 代码做以下调整:
<div id="app">
<div @click.capture="onDivClick">
<input type="button" value="点击" @click="onButtonClick">
div>
div>
由上图,我们发现是先触发DIV绑定的方法,然后再触发按钮绑定的方法。
.stop
会阻止事件冒泡,而.self
只会阻止自己身上冒泡行为的触发,并不会真正阻止冒泡的行为
参考资料:
https://cn.vuejs.org/v2/api/#v-on