防止事件在Vue中冒泡 [英] Prevent event bubbling in Vue

问题描述

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

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

解决方案

来自文档，使用 self 事件修饰符仅捕获源自元素本身的事件。

 < div id = largeArea v-on：click.self = do_X> 
  

  new Vue（{el：'#app'，方法：{do_X（）{console.log（Date.now（），'do_X'）}}}） 

< pre class = snippet-code-css lang-css prettyprint-override> #largeArea {padding：20px;边框：1像素纯黑色；}

 < 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> < / div>< / div>  

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

So I have this issue in Vue where I don't want "do_X" to trigger when I click on the button, although its a part of the largeArea.

解决方案

From the documentation, use the self event modifier to only capture events originating on the element itself.

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

这篇关于防止事件在Vue中冒泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！