SoFunction
Updated on 2025-04-03

vue method to prevent click events from continuing to propagate

As shown below:

<div >
  <div v-on:click="dodo">
   <button v-on:click="doThis">Prevent click events from continuing to spread</button>
  </div>
 </div>

 <script>
  var app = new Vue({
   el: "#app",
   data: {
    name: ""
   },
   methods: {
    doThis: function () {
     alert("noclick");
    },
    dodo: function () {
     alert("dodo");
    }
   }
  });
 </script>

"noclick" will pop up first, then "dodo".

 <div >
  <div v-on:click="dodo">
   <button v-on:="doThis">Prevent click events from continuing to spread</button>
  </div>
 </div>

 <script>
  var app = new Vue({
   el: "#app",
   data: {
    name: ""
   },
   methods: {
    doThis: function () {
     alert("noclick");
    },
    dodo: function () {
     alert("dodo");
    }
   }
  });
 </script>

Only "noclick" pops up

The above method to prevent click events from continuing to spread is all the content I share with you. I hope you can give you a reference and I hope you can support me more.