.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。
就是谁有该事件修饰符,就先触发谁。
.self 只当事件在该元素本身(比如不是子元素)触发是触发回调
.once 事件只触发一次
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.inner{
background: #00bfff;
height: 60px;
margin:10px;
}
.outer{
background: green;
height: 100px;
margin:10px;
}
</style>
</head>
<body>
<div id='app'>
<!-- 使用 .stop 阻止事件冒泡-->
<div class="outer" @click="divClick">
<input type="button" @click.stop="btnClick" value="确认"/>
</div>
<!--使用 .prevent 阻止默认行为-->
<a href="http://www.baidu.com" @click.prevent="linkClick">百度</a>
<!-- 使用 .captrue 实现捕获触发事件的机制,-->
<div class="outer" @click.captrue="divClick">
<input type="button" @click.captrue="btnClick" value="点我"/>
</div>
<!-- 使用 .self 实现只有点击当前元素的时候,才会触发事件处理函数-->
<div class="outer" @click.self="divClick">
<input type="button" @click="btnClick" value="点我"/>
</div>
<!-- 使用 .once 只触发一次事件处理函数-->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">百度</a>
<!-- .self只会阻止自己身上的事件冒泡行为,并不会真正阻止冒泡的行为-->
<div class="outer" @click="outerClick">
<div class="inner" @click.self="divClick">
<input type="button" @click="btnClick" value="点我"/>
</div>
</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
divClick(){
console.log("点击了div");
},
btnClick(){
console.log("点击了按钮");
},
linkClick(){
console.log("点击了百度");
},
outerClick(){
console.log("点击了外层div");
}
}
});
</script>
</html>