it-swarm.com.de

Verhindern Sie, dass das Ereignis in Vue

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

Ich habe also dieses Problem in Vue wo ich nicht möchte, dass "do_X" ausgelöst wird, wenn ich auf die Schaltfläche klicke, obwohl es Teil der LargeArea ist.

21
3zzy

Verwenden Sie in der Dokumentation den Ereignismodifikator self, um nur Ereignisse zu erfassen, die vom Element selbst stammen ...

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

Ich habe festgestellt, dass die Verwendung des Ereignismodifikators 'stop' für das untergeordnete Element für mich funktioniert. z.B

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