I\'ve been reading the following:
https://css-tricks.com/dangers-stopping-event-propagation/
I want to implement this in a proper and safe way.
I wo
Another solution to this can be a second element. It lies beneath the dropdown, but goes over the viewport and has your click-handler, that closes the dropdown. This elements existence (CSS:display, Vue:v-if...) should be linked to the dropdown.
This has the (dis-)advantage, that a click outside does not register on the element you click on, so that is a deciding factor for this mehtod. With background-color and higher opacity it can be used for pop-ups.
CSS:
.dropdown {
...
z-index: 2;
}
.overlay {
display:none;
position: fixed;
bottom: 0;
top: 0;
right: 0;
left: 0;
opacity: 0;
z-index: 1;
}
.overlay.open {
display:block;
}