Ukrycie elementu klikając "poza" nim

Question

Hej,

Próbuję zaprogramować stan, w którym klikając poza określony element, dany element zniknie. Niestety kod nie działa. Uprzejma prośba o pomoc.

Kod JS

var lang;
lang = document.querySelector("#language");

function change()
	{
		if (lang.style.display==="none" || lang.style.display=="" )
		{
			lang.style.display="block";
		}
		else
		{
			lang.style.display="none";
		}
	}
	

document.addEventListener('click', function clickOutside(event) {

  if (lang.contains(event.target)) {

  lang.style.display = 'none';

  }

});

 

Answer 1

Tak na oko, to ukrywasz element lang tylko wówczas, gdy zawiera on aktualnie kliknięty element – a warunek powinien być raczej odwrotny (czyli ukrywanie wówczas, gdy NIE zawiera aktualnie klikniętego elementu).

Dodatkowo, zamiast operować bezpośrednio na stylach, można operować na klasach w CSS-ie (np. dzięki temu będziesz w stanie zastąpić cały kod w funkcji change() de facto wywołaniem lang.classList.toggle()).

Answer 2

Proponuje, sprawdź co zawiera event.target

[ on-line ]

document.addEventListener('click', (e) => {
  if (!e.target.matches('.center')) // w tym kontekście, czego nie zawiera
    lang.classList.remove('show');
});

 

 

BTW, sprawdź też taki zapis w ramach ciekawostki, on-line

function change() {
  if (!lang.style.display || lang.style.display == 'none' )
    ...
}