# 事件修飾符
**事件修飾符這系列東西比較散碎，我們遇到什么再仔細說明即可。官網文檔整理的比較細。我們在學習時候還是以能夠明白而且應用為準。**
## 事件冒泡和阻止默認行為
```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>
```
