Stop propagation of a div inside a div - vuejs2

Question

I have a card inside another clickable card. In my case, a carousel inside a card.
In a usual situation, I know I have to use #click.stop to prevent opening the parent card from opening when I click something clickable inside it.... but in my case, I'm having a carousel which do not have a click event, hence, I'm unable to use stop event on it. So what happens is when I click the next arrow of the carousel, the parent card pops up too.
Any idea how do I use stop event handling on something that do not have click event?
________________
| <-|---- Master Card
| ------------ |
| | <--|-|---- Carousel
| |__________| |
| |
| |
|______________|

Answer 1

tl;dr:
In Vue, if you want to stop the native click events, you have to use the native event modifier:
<carousel #click.native.stop />
or
<carousel #click.native.stop="yourMethod" />
Internally, the .stop modifier calls .stopPropagation() on the native click event, besides running yourMethod with the click event as param (when yourMethod is specified).
$emit()-ted click events (i.e: $emit('click', payload) don't need stopping, as they are not propagating by default.
complete answer: (regardless of Vue)
Any HTML element has an onclick event.
Therefore,
document.querySelector('.your-selector').onclick = function(event) {
event.stopPropagation()
}
will stop the click event's propagation (assuming document.querySelector('.your-selector') does select your carousel - note querySelector only returns the first element matching the selector).
If you want to do this on multiple elements matching the same selector, you'll need to use querySelectorAll and iterate through each element. Example:
[...document.querySelectorAll('.your-selector')].forEach(el => {
el.onclick = function(e) {
e.stopPropagation();
}
});
There are less verbose ways of doing it using frameworks, such as jQuery:
$('.your-selector').on('click', e => { e.stopPropagation(); })
... which does it on the entire collection returned by $('.your-selector'), out of the box.