Evite la propagación de eventos en Vue

Solución:

Descubrí que usar el modificador de evento ‘detener’ en el elemento secundario funcionó para mí. p.ej

<div id="app">
  <div id="largeArea" @click="do_X">
    <button @click.stop="do_Y">Button</button>
  </div>
</div>

De la documentación, use el self modificador de eventos para capturar solo eventos que se originan en el propio elemento.

<div id="largeArea" v-on:click.self="do_X">

new Vue({
  el: '#app',
  methods: {
    do_X () {
      console.log(Date.now(), 'do_X')
    }
  }
})

#largeArea {
  padding: 20px;
  border: 1px solid black;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <div id="largeArea" @click.self="do_X">
    <button>Button</button>
  </div>
</div>

Evite el burbujeo de todos los clics dentro de un recipiente <div>

<div @click.stop="" class="action">

  <button @click="someClickAction1()">Action 1</button>

  <button @click="someClickAction2()">Action 2</button>

<div>

Evitar el burbujeo en una acción de clic existente

<button @click.stop="someClickAction()">Single Action</button>

---

---

Utiliza Nuestro Buscador