- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 添加事件侦听器事使用事件捕获模式
- .self 只当事件在该元素本身触发时触发回调
- .once 事件只触发一次
1.使用.stop修饰符阻止冒泡
<div class="inner" style="background-color: aquamarine" @click="divHandler">
<!-- 使用 .stop 阻止冒泡 -->
<input type="button" value="戳我" @click.stop="btnHandler">
</div>
<script>
divHandler:function () {
console.log('这里触发了inner div 的点击事件');
},
btnHandler:function(){
console.log('这里触发了 btn 按钮 的点击事件');
},
</script>
2.使用.prevent修饰符阻止默认行为
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题,先去百度</a>
<script>
//ES6语法
linkClick(){
console.log('这里触发了链接的点击事件')
},
</script>
3.使用.capture修饰符实现捕获触发事件的机制
(即:即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理)
<div class="inner" style="background-color: aquamarine" @click.capture="divHandler">
<input type="button" value="戳我" @click="btnHandler">
</div>
<script>
divHandler:function () {
console.log('这里触发了inner div 的点击事件');
},
btnHandler:function(){
console.log('这里触发了 btn 按钮 的点击事件');
},
</script>
4.使用.self修饰符实现只有点击当前元素的时候才会触发事件处理函数
<div class="inner" @click.self="divHandler">
<input type="button" value="戳我" @click="btnHandler">
</div>
<script>
divHandler:function () {
console.log('这里触发了inner div 的点击事件');
},
btnHandler:function(){
console.log('这里触发了 btn 按钮 的点击事件');
},
</script>
5.使用.once修饰符只触发一次事件处理函数
//修饰符可以串联
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题,先去百度</a>
.stop和.self的区别
.self只会阻止自己身上冒泡行为的触发,并不会真正阻止冒泡的行为。
<div class="outer" @click="divHandler2">
<div class="inner" @click="divHandler">
<!-- 使用 .stop 阻止冒泡 -->
<input type="button" value="戳我" @click.stop="btnHandler">
</div>
</div>
<div class="outer" @click="divHandler2">
<div class="inner" @click.self="divHandler">
<!-- 使用 .stop 阻止冒泡 -->
<input type="button" value="戳我" @click="btnHandler">
</div>
</div>
<script>
divHandler:function () {
console.log('这里触发了inner div 的点击事件');
},
btnHandler:function(){
console.log('这里触发了 btn 按钮 的点击事件')
},
divHandler2:function () {
console.log('这里触发了outer div 的点击事件');
},
</script>