I wanna ask about click event in Vue. I have a span contain div and button. When I click on the button (thisButton) it works well, but the span (thisMask) doesn't seem to work when it clicked. I also add emit event and when I clicked on thisButton it also trigger emit event thisMaskClicked. But the console.log just return which thisButton has. Did I miss something?
<span class="this_mask" @click="thisMask">
<div class="this__wrap">
<div class="this__text">
<button class="this__button" @click="thisButton"></button>
</div>
</div>
</span>
this.js
thisMask () {
this.$emit('thisMaskClicked')
console.log("This Mask Executed")
},
thisButton() {
this.$emit('thisButtonClicked')
console.log("This Button Clicked")
}
What you are looking for is the self modifier.
If a parent node and child node are registered with same type of event then when that type event dispatches then handlers of parent and child are called.
Here is an example fiddle
Your code should look like:
<span class="this_mask" @click="thisMask">
<div class="this__wrap">
<div class="this__text">
<button class="this__button" @click.self="thisButton"></button>
</div>
</div>
</span>
Code is untested so I'm not sure if you have to attach in your example to button or span