<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/[email protected]/dist/vue.js"></script>
<div id="app">
<div id="largeArea" @click.self="do_X">
<button>Button</button>
</div>
</div>
我发现在子元素上使用'stop'事件修饰符对我有用。例如
<div id="app">
<div id="largeArea" @click="do_X">
<button @click.stop="do_Y">Button</button>
</div>
</div>