一、阻止冒泡事件修饰符
什么是冒泡事件？在div嵌套的条件下，给所有div同时绑定click事件，点击最里面的div事件会一层一层由内向外触发父div的事件。事件从最里层的后代div逐层传出，这部分我们叫冒泡过程。
如何阻止事件冒泡，在vue修饰符中有一个指令为“ .stop” ,为内层的div绑定该指令，则可以解决冒泡事件。代码如下：
@click.stop="btnclick"
<body>
<div class="inner" @click="divclick" >
<input type="button" value="点击" @click.stop="btnclick">
</div>
</body>
</html>
<script src="vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:".inner",
data:{
msg:'触发了事件input',
msg1:'触发了事件div'
},
methods:{
btnclick(){ // 该方法 等同于btnclick:function(){ }，简写省略了其中的 :function
console.log(this.msg);
},
divclick(){
console.log(this.msg1);
}
}
})
冒泡事件的应用场景：
我们在使用中多数情况下只使用冒泡监听。例如一条购物车信息，在这条信息中，右下角有一个删除按钮。点击这条消息可查看详情，点击删除按钮可将此商品移除。我们会分别给信息的div和删除button添加一个冒泡的click事件监听。如果不做阻止传递，点击删除button后，会显示商品详情。显然这不是我们想看到的。这时我们给button一个阻止事件传递的功能，点击删除按钮后，事件就会结束，就不再显示商品详情。
二、阻止默认行为修饰符 .prevent
当有链接的时候，链接会自动跳转，而prevent则是阻止链接的自动跳转，只触发当前事件。
<body>
<div class="inner" @click="divclick" >
<!-- 使用 .prevent 阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
</div>
</body>
</html>
<script src="vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:".inner",
data:{ },
methods:{
linkClick() {
console.log('触发了点击事件')
}
}
})
</script>
三、实现捕获触发事件的机制 .capture
当有两个div时，点击内层的触发事件，让其先获取外层的触发事件,再触发本身的div。
<!-- 使用 .capture 实现捕获触发事件的机制 -->
<!-- <div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div> -->
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
div1Handler() {
console.log('这是触发了 inner div 的点击事件')
},
btnHandler() {
console.log('这是触发了 btn 按钮 的点击事件')
}
}
});
</script>
四、实现自身触发 .self
只有点击当前元素时候，才会触发事件处理函数.。
.self只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为
<div class="inner" @click.self="div1Handler"> <input type="button" value="戳他" @click="btnHandler"> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: { div1Handler() { console.log('这是触发了 inner div 的点击事件') }, btnHandler() { console.log('这是触发了 btn 按钮 的点击事件') } } });
五、 使用 .once 只触发一次事件处理函数