.stop事件修飾符 · vue

## 修飾符是vue功能的拓展，是對vue事件或者系統操作等等進行功能的補充 # .stop 修飾符 ## 能夠實現阻止事件冒泡 ## 語法：@click.stop ## ![](https://img.kancloud.cn/ae/66/ae66c428d39672a5280e60ce6b3adef9_1258x771.png) 代碼案例： ``` <div class="outer" @click="outer"> <div class="center" @click="center"> <div class="inner" @click="inner"></div> </div> </div> ``` ![](https://img.kancloud.cn/91/33/9133151221519d072f41cdb021917422_1827x1146.png) ![](https://img.kancloud.cn/41/95/41953491004569ded4aff87a9828e5a8_1835x892.png) ## 通過上面的案例，我們了解了.stop修飾符的作用就是阻止事件的一個冒泡 ## 其作用類似原生JavaScript的event.stopPropagation()方法自己寫的代碼案例： ``` <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style> .outer{ width: 180px; height: 180px; background:gold; margin: 100px auto; padding:30px; border-radius: 50%; } .outer .center{ width: 120px; height: 120px; background: pink; padding: 30px; border-radius: 50%; } .outer .center .inner{ width:130px; height: 130px; background: cyan; border-radius: 50%; } </style> </head> <body> <div id="app"> <div class="outer" @click="outer"> <div class="center" @click="center"> <div class="inner" @click.stop="inner"></div> </div> </div> </div> </body> <script src="vue/vue.js"></script> <script> var vue=new Vue({ el:"#app", methods:{ outer(){ alert("外層") } , center(){ alert("中間") }, inner(){ alert("內層") } } }) </script> </html> ```