A propriedade event.target
faz referência, nos casos de eventos de clique, ao elemento que emitiu o evento em questão.
Sabendo disso, você pode utilizar a propriedade target
para verificar se o elemento que ativou o evento cumpre uma certa condição e, a depender de seu resultado, permitir ou descartar o evento.
Trivialmente, pode-se fazer algo assim assim:
const div = document.querySelector('div#my-div');
window.addEventListener('click', function(event) {
if (event.target.tagName === 'DIV') {
console.log('Evento descartado.');
return;
}
div.remove();
});
#my-div, #my-div * {
border: solid 1px black;
background-color: rgba(0, 0, 0, .05);
}
<div id="my-div">
<p>Paragrafo</p>
<p>Paragrafo</p>
<p>Paragrafo</p>
<p>Paragrafo</p>
<p>Paragrafo</p>
</div>
Repare agora que, se você clicar na div
(área marcada em cinza claro), ela não é mais removida. No entanto, o efeito não é descartado se clicarmos em um elemento interno à div
, como um de seus elementos p
, já que a verificação que estamos fazendo não os engloba.
Portanto, precisamos garantir que o alvo do evento não seja a div
em questão ou um de seus filhos. Para isso, pode-se utilizar um while
e ir verificando os parentes de target
, assim.
Teremos, então:
const div = document.querySelector('div#my-div');
window.addEventListener('click', function(event) {
// Se o alvo do evento for a div ou um de seus filhos, descarte o evento.
if (event.target === div || isChildrenOf(event.target, div)) {
console.log('Evento descartado.');
return;
}
div.remove();
});
// Função que verifica se `child` é filho de `parent` na hierarquia do DOM.
function isChildrenOf(child, parent) {
let current = child;
while (current = current.parentElement) {
if (current === parent) {
return true;
}
}
return false;
}
#my-div, #my-div * {
border: solid 1px black;
background-color: rgba(0, 0, 0, .05);
}
<div id="my-div">
<p>Paragrafo</p>
<p>Paragrafo</p>
<p>Paragrafo</p>
<p>Paragrafo</p>
<p>Paragrafo</p>
</div>