vue.js – 防止Vue中的事件冒泡

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

所以我在Vue中有这个问题,当我点击按钮时我不想触发“do_X”,尽管它是largeArea的一部分.

解决方法

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