Как убрать класс при клике за пределами блока?

Question

[Gorila Lopster]

Как убрать класс (закрыть список) при клике за пределами блока?

let dropListBtn = document.querySelector('.header__drop-arrow'),
		dropList = document.querySelector('.header__drop-list');

	/***header phone drop list */
	let openDropList = function () {
		dropListBtn.classList.toggle('active');
		dropList.classList.toggle('active');
	};
	dropListBtn.addEventListener('click', openDropList);

	window.onclick = function (event) {
		if (event.target == dropListBtn) {
			dropListBtn.classList.remove('active');
			dropList.classList.remove('active');
		}
	};

Написал window.onclick, не работает.
Был еще такой вариант:

let target = elem = event.target;
		while (target != this) {
			if (target == dropListBtn) {
				dropListBtn.classList.toggle('active');
				dropList.classList.toggle('active');
				return;
			}
			target = target.parentNode;

		};
		dropListBtn.classList.remove('active');
		dropList.classList.remove('active');

Он работает, но ниже по странице есть еще один элемент который взаимодействует с javascript (скрипт ленивой загрузки видео с ютуба) когда я запускаю видео, то в консоли вылетает ошибка:

Uncaught TypeError: Cannot read property 'parentNode' of null
    at HTMLDocument.document.onclick (scripts.min.js:1)

Comments

[drawnofmymind]

if(event.target.classList.contains('your-class')) мб так?

[Gorila Lopster]

drawnofmymind, это вы за второй или первый вариант?

Answer 1

[Степан Потиенко]

Попробуй сделать прозрачный блок на всю страницу с z-index: -2 или больше, и при нажатии на него, скрывать список