Detect clicks outside of specific div and all of it's children

Question

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

Answer 1

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;
}