<div id="largeArea" v-on:click="do_X">
<button>Button</button>
</div>
所以我在Vue有这个问题,我不想要&#34; do_X&#34;当我点击按钮时触发,虽然它是largeArea的一部分。
答案 0 :(得分:22)
从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>
答案 1 :(得分:13)
我发现在子元素上使用'stop'事件修饰符对我有用。 例如
<div id="app">
<div id="largeArea" @click="do_X">
<button @click.stop="do_Y">Button</button>
</div>
</div>
答案 2 :(得分:2)
<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>
答案 3 :(得分:1)
均未提供答案。在我的情况下,它是用<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')
}
}
})
答案 4 :(得分:0)
您可以使用事件修改器 .stop
实施示例:
<div id="app">
<!-- the click event's propagation will be stopped -->
<button @click.stop>Click me</button>
</div>
Vuejs中有一个事件修饰符的列表,您可以在官方documentation中阅读。