Prevent on click on parent when clicking button inside div
Here is how to master this problem.
Say you have a parent element and some child elements.
1.(1st case) You want the parent click to do not affect the child clicks. Just put at the parent element the .self
modifier:
<div class="parent" @click.self="parent"> <!-- .self modifier -->
<span class="child" @click="child1">Child1</span>
<span class="child" @click="child2">Child2</span>
<span class="child" @click="child3">Child3</span>
</div>
See it in action here
note: if you remove the .self
when you click a child, the parent event will fire too.
2.(2nd case) You have the below code:
<div @click="parent">
Click to activate
<i class="fa fa-trash" title="delete this" @click="delete_clicked"></i>
</div>
The problem is:
- When you click the icon element the parent click will fire. (you don't want this)
- You can NOT use the 1st solution because you want to fire the parent event even if the text "Click to activate" gets clicked.
The solution to this is to put the .stop
modifier to the icon element so the parent event will not fire.
See it in action here
as mentioned on the link provided by Justin
you can .self
in the click event
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>
Have a look at Event Modifiers in the Vue.js v3 docs (v2 docs here), v-on:click.stop
will stop that click from propagating or "bubbling" up to the parent element.