Uma opção é você adicionar um event listener na div
para parar a propagação do evento de clique com stopPropagation
. A div
escutará pelos cliques em toda região que é renderizada, então pode clicar nos filhos que funcionará como esperado.
Para isso funcionar, entretanto, você precisa remover o , true
do window.addEventListener
. Isso porque, quando esse parâmetroargumento é true
, significa que o evento será recebido primeiro por esse listener e depois pelos outros. Portanto, com o true
, não adiantaria colocar um listener na div
.
Atenção: Se você colocou o true
por algum motivo específico da sua aplicação, ou precisará tratar isso de um jeito melhor para poder retirá-lo, ou não deve adotar esta resposta.
const div = document.body.firstElementChild;
// Adicionei o listener, apenas para parar a propagação
div.addEventListener('click', (event) => event.stopPropagation());
function ocult(event) {
div.remove();
}
// Removi o terceiro parâmetroargumento
window.addEventListener("click", ocult);
div {
background: #333333;
margin: 20px;
}
p {
background: #181818;
color: white;
padding: 20px;
margin: 20px;
}
<div>
<p>Paragrafo</p>
<p>Paragrafo</p>
<p>Paragrafo</p>
<p>Paragrafo</p>
<p>Paragrafo</p>
</div>