Что здесь изменить чтобы работало закрытие окна при клике на любое пустое место на странице?

Question

[yuriytkachenko]

есть вот такая у меня штука:
https://jsfiddle.net/2fs4vgu7/
1) при нажатии на кнопку открывается окно
2) при нажатии на крестик закрывается окно
Хотел сделать еще так чтобы при клике на любое пустое место на странице окно закрывалось.
Реализовать пробовал вот так:

window.onclick = (event) => box.style.display = (event.target == window ) ? "none";

Но это не работает. Пробовал вместо window везде написать document, но тоже не работает. В чем моя ошибка?

Answer 1

[Владислав]

В целом не самая элегантная реализация, но суть такова
https://jsfiddle.net/mcake/890qw4nx/1/

Comments

[yuriytkachenko]

здраствуйте, а без stopPropagation нельзя никак? зачем оно?

[Владислав]

yuriytkachenko, оно останавливает всплытие события чтобы по клику внутри желтого блока, он не закрывался.
Можно без него, но тогда тебе нужно искать внутри e.target этот желтый блок, и если он там есть тогда не закрывать, иначе закрывать. В целом просто больше кода получается и чуть больше логики, но тоже можно.

[yuriytkachenko]

Mooncake8, спасибо)

Answer 2

[Дмитрий]

var changeBoxVisibility = show => {
	 box.style.display = show ? 'block' : 'none'	
}

var showBox = () => changeBoxVisibility(true)
var hideBox = () => changeBoxVisibility(false)

var open = document.querySelector("#open");
var close = document.querySelector(".close");

open.onclick = showBox
close.onclick = hideBox

Array.from([open, box]).forEach(el => {
	el.addEventListener('click', e => e.stopPropagation())	
})

document.addEventListener('click', hideBox)

Comments

[yuriytkachenko]

здраствуйте, а без stopPropagation нельзя никак? зачем оно?

[Дмитрий]

yuriytkachenko, Чтобы не срабатывало

document.addEventListener('click', () => box.style.display ='none')

когда мы не хотим

[yuriytkachenko]

Дмитрий, спасибо)