# 事件修饰符
**事件修饰符这系列东西比较散碎，我们遇到什么再仔细说明即可。官网文档整理的比较细。我们在学习时候还是以能够明白而且应用为准。**
## 事件冒泡和阻止默认行为
```html
<style>
#box1{
width: 300px;
height: 300px;
background: pink;}
#box2{
width: 200px;
height: 200px;
background: skyblue;
}
#box3{
width: 200px;
height: 200px;
background: skyblue;
}
</style>
<div id="app">
<div id="box1" @click="box1">
box1
<div id="box2" @click.stop="box2">
box2
</div>
</div>
<div id="box3" @contextmenu.prevent="box3">
禁止鼠标右键
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
methods:{
box1(){
alert(1)
},
box2(){
alert(2)
},
box3(){
alert(3)
}
}
})
</script>
```
