防止Vue中的事件冒泡

Question

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

所以我在Vue有这个问题，我不想要＆＃34; do_X＆＃34;当我点击按钮时触发，虽然它是largeArea的一部分。

Answer 1

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

Answer 2

我发现在子元素上使用'stop'事件修饰符对我有用。 例如

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

Answer 3

防止冒充容器<div>内的所有点击

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

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

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

<div>

防止在现有的点击操作中冒泡

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

Answer 4

均未提供答案。在我的情况下，它是用<router-link>而不是<div>包裹的。

我在子元素上调用了e.preventDefault()，它起作用了

<router-link>
    <div @click="do_X"></div>
</router-link>

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

Answer 5

您可以使用事件修改器 .stop

在Vuejs中停止事件提示框

实施示例：

<div id="app">
  <!-- the click event's propagation will be stopped -->
  <button @click.stop>Click me</button>
</div>

Vuejs中有一个事件修饰符的列表，您可以在官方documentation中阅读。