防止 Vue 中的事件冒泡 [英] Prevent event bubbling in Vue
本文介绍了防止 Vue 中的事件冒泡的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
<按钮>按钮</按钮>
所以我在 Vue 中遇到了这个问题,我不希望在单击按钮时触发do_X",尽管它是 largeArea 的一部分.
解决方案
来自 文档,使用 self
事件修饰符仅捕获源自元素本身的事件.
new Vue({el: '#app',方法: {做_X(){console.log(Date.now(), 'do_X')}}})
#largeArea {填充:20px;边框:1px纯黑色;}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></脚本><div id="应用程序"><div id="largeArea" @click.self="do_X"><按钮>按钮</按钮>
<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屋!
查看全文