<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.
Add a comment
|
5 Answers
I found that using the 'stop' event modifier on the child element worked for me. eg
<div id="app">
<div id="largeArea" @click="do_X">
<button @click.stop="do_Y">Button</button>
</div>
</div>
3 Comments
Meanman
This is a much better answer as in my case I need to be able to click anywhere on the larger div to perform a specific action, and on clicking on the small element to perform another action. In my case "v-on:click.stop="doSomeAction()" worked.
Phil
@Meanman there's little difference between
stop on the child and self on the parent for isolating the event source. However, the former has a side-effect of preventing the event from reaching lower levels in the document. For example, you could not track all clicks on the document or body if you use stop
Gnietschow
Great, this even worked with a nested
<a> and without event handler for me: <a :href="data.link" target="_blank" @click.stop>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/[email protected]/dist/vue.js"></script>
<div id="app">
<div id="largeArea" @click.self="do_X">
<button>Button</button>
</div>
</div>
1 Comment
Akin Hwan
is there an event decorator I can add to the child element. because I do want event bubbling for every child element except this one other button. {{UPDATE: i used @click.prevent.stop for desired effect! }}
Prevent bubbling for all clicks inside a container <div>
<div @click.stop="" class="action">
<button @click="someClickAction1()">Action 1</button>
<button @click="someClickAction2()">Action 2</button>
<div>
Prevent bubbling on an existing click action
<button @click.stop="someClickAction()">Single Action</button>
Comments
Neither of the provided answers. In my situation it's wrapped in a <router-link> not a <div>.
I called e.preventDefault() on the child element and it worked
<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')
}
}
})
Comments
I was creating a navigation bar and had similar requirements. I wanted the popup menu to be closed when clicked anywhere except on the menu or its children.
This can be done by using event modifiers. Fore reference see this docs
Specifically, we can use stop event modifier.
<div id="largeArea" v-on:click="do_X()">
<button @click.stop="">Button</button>
</div>
.stop will stop the event propagation.
In my case better solution was to use e.target != this.$el
mounted() {
window.addEventListener('click', (e)=>{
if(e.target !== this.$el)
this.showChild = false;
})
}
answered May 23, 2021 at 14:51
Mayank Kumar Chaudhari
19.3k14 gold badges74 silver badges165 bronze badges