防止 Vue 中的事件冒泡

Question

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

所以我在 Vue 中遇到了这个问题，我不希望在单击按钮时触发“do_X”，尽管它是 largeArea 的一部分。

原文由 eozzy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从 文档 中，使用 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/vue@2.5.13/dist/vue.js"></script>
<div id="app">
  <div id="largeArea" @click.self="do_X">
    <button>Button</button>
  </div>
</div>

原文由 Phil 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我发现在子元素上使用“停止”事件修饰符对我有用。例如

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

原文由 omarjebari 发布，翻译遵循 CC BY-SA 4.0 许可协议