<div id="app"><div v-on:click="dodo"><button v-on:click="doThis">阻止單擊事件繼續傳播</button></div></div><script>var app = new Vue({el: "#app",data: {name: "Vue.js"},methods: {doThis: function () {alert("dothis");},dodo: function () {alert("dodo");}}});</script>

這樣的話，會先彈出dothis 在彈出dodo,
如果用@click.stop的話

<div id="app"><div v-on:click="dodo"><button v-on:click.stop="doThis">阻止單擊事件繼續傳播</button></div></div><script>var app = new Vue({el: "#app",data: {name: "Vue.js"},methods: {doThis: function () {alert("dothis");},dodo: function () {alert("dodo");}}});</script>

這樣的話，只會彈出dothis

總結

以上是生活随笔為你收集整理的@click.stop作用(阻止点击事件继续传播，即阻止事件冒泡)的全部內容，希望文章能夠幫你解決所遇到的問題。

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