防止Vue中的事件冒泡
防止Vue中的事件冒泡
提问于 2018-02-15 00:04:09
<div id="largeArea" v-on:click="do_X">
<button>Button</button>
</div>因此，我在Vue中有一个问题，我不想在单击按钮时触发"do_X“，尽管它是largeArea的一部分。
回答 5
Stack Overflow用户
回答已采纳
发布于 2018-02-15 00:09:02
在文档中，使用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>
Stack Overflow用户
发布于 2018-12-17 15:13:24
我发现在子元素上使用“停止”事件修饰符对我有效。例如
<div id="app">
<div id="largeArea" @click="do_X">
<button @click.stop="do_Y">Button</button>
</div>
</div>Stack Overflow用户
发布于 2020-10-21 18:57:19
防止容器<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48798216
复制相关文章
相似问题
腾讯云开发者
