Empêcher la propagation d'événements dans Vue

Question

<div id="largeArea" v-on:click="do_X">
    <button>Button</button>
</div>

J'ai donc ce problème dans Vue où je ne veux pas que "do_X" se déclenche lorsque je clique sur le bouton, bien que cela fasse partie de la grande zone.

Answer 1

A partir de documentation , utilisez le modificateur d'événement self pour capturer uniquement les événements provenant de l'élément lui-même ...

<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>

Answer 2

J'ai trouvé que l'utilisation du modificateur d'événement "stop" sur l'élément enfant a fonctionné pour moi. par exemple

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