Event modifier
- .stop: equivalent to event.stopPropagation() in JS to prevent event bubbling
- .prevent: equivalent to event.preventDefault() in JS to prevent default events
- .capture: Use event capture mode when adding event listeners
- .self: The callback is triggered only when the event is triggered on the element itself (such as not a child element)
- .once: The event is only triggered once
.stop prevents the event from bubbling up
<div id="app">
<!-- 使用 .stop 阻止冒泡 -->
<div class="inner" @click="divHandler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{
divHandler(){
console.log('这是触发了 inner div 的点击事件');
},
btnHandler(){
console.log('这是触发了 btn div 的点击事件');
}
}
})
</script>
.prevent prevents the default behavior
<div id="app">
<!-- 使用 .prevent 阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">百度</a>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{
linkClick(){
console.log('这是触发了 链接 的点击事件');
}
}
})
</script>
.capture to achieve capture trigger
<!-- 使用 .capture 实现捕获触发事件的机制,与冒泡相反 -->
<div class="inner" @click.capture="divHandler">
<input type="button" value="戳他" @click="btnHandler">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{
divHandler(){
console.log('这是触发了 inner div 的点击事件');
},
btnHandler(){
console.log('这是触发了 btn div 的点击事件');
}
}
})
</script>
.capture realizes that the event will only be triggered when the current element is clicked
<!-- 使用 .self 实现只有点击当前元素的时候,才会触发事件处理函数 -->
<div class="inner" @click.self="divHandler">
<input type="button" value="戳他" @click="btnHandler">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{
divHandler(){
console.log('这是触发了 inner div 的点击事件');
},
btnHandler(){
console.log('这是触发了 btn div 的点击事件');
}
}
})
</script>
.once only triggers the event handler once
<!-- 使用 .once 只触发一次事件处理函数 -->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">百度</a>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
divHandler(){
console.log('这是触发了 inner div 的点击事件');
},
btnHandler(){
console.log('这是触发了 btn 按钮 的点击事件');
},
linkClick(){
console.log('这是触发了 链接 的点击事件');
}
}
})
</script>
注意:.self 只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡的行为