事件修饰符
- .stop:等同于JS中的event.stopPropagation(),阻止事件冒泡
- .prevent:等同于JS中的event.preventDefault(),阻止默认事件
- .capture:添加事件侦听器时使用事件捕获模式
- .self:只当事件在该元素本身(比如不是子元素)触发时触发回调
- .once:事件只触发一次
.stop阻止事件冒泡
<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阻止默认行为
<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实现捕获触发
<!-- 使用 .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实现只有点击当前元素时,才会触发事件
<!-- 使用 .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只触发一次事件处理函数
<!-- 使用 .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 只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡的行为