web-dev-qa-db-ja.com

Vueでのイベントバブリングを防止

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

だから、この問題はVueにあります。ここでは、ボタンをクリックしたときに "do_X"がトリガーされたくないのですが、これはlargeAreaの一部です。

vue.jsclickevent-bubbling
21
3zzy

documentation から、selfイベント修飾子を使用して、要素自体で発生したイベントのみをキャプチャします...

<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

子要素で「停止」イベント修飾子を使用すると、うまくいくことがわかりました。例えば

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