Vue中防止事件冒泡

Question

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

所以我在 Vue 中遇到了这个问题，我不希望 "do_X" 在我单击按钮时触发，尽管它是 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

提供的答案都没有。在我的情况下，它被包裹在 <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 4

防止容器内的所有点击冒泡`<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 5

我正在创建一个导航栏并且有类似的要求。我希望在接受菜单或其子项的任何地方单击时关闭弹出菜单。

这可以通过使用事件修饰符来完成。参考文献见此 docs

具体来说，我们可以使用stop事件修饰符。

<div id="largeArea" v-on:click="do_X()">
    <button @click.stop="">Button</button>
</div>

.stop 将停止事件传播。

在我的例子中，更好的解决方案是使用 e.target != this.$el

mounted() {
    window.addEventListener('click', (e)=>{
        if(e.target !== this.$el)
            this.showChild = false;
    })
}

Vue中防止事件冒泡

Prevent event bubbling in Vue

click

event-bubbling

event-propagation

vue.js

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

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

Vue中防止事件冒泡

Prevent event bubbling in Vue

click

event-bubbling

event-propagation

vue.js

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

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

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