128-Vue中的事件修飾符

• .stop 阻止事件冒泡(*)

• .prevent 阻止默認事件(*)

• .prevent.stop 阻止默認事件的同時阻止冒泡

• .once 阻止事件重復觸發（once與stop不能一起使用，否則再次觸發事件，依然會冒泡）(*)

只能觸發一次，例如：搶優惠券！

<template><div><div class="big" @click="cb"><div class="small" @click="cs"><a href="#" @click.stop.prevent="ca">a標簽</a></div></div><button @click.once="cc">點我</button></div> </template><script> export default {methods:{cb(){console.log("點擊大的");},cs(){console.log("點擊小的");},ca(){console.log("點擊a標簽");},cc(){console.log("點擊按鈕");}}} </script><style> .big{width: 300px;height: 300px;background-color: pink; } .small{width: 200px;height: 200px;background-color: skyblue; } </style>

?效果如下：

總結

以上是生活随笔為你收集整理的128-Vue中的事件修饰符-阻止冒泡事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。