6

Tenho uma div que contem alguns elementos filhos. Gostaria de que, ao clicar na window, essa div fosse removida.

O código abaixo serviu, porém, ao clicar no conteúdo que está dentro da div, ela some do mesmo jeito. Como impedir que isso aconteça tanto para div quanto para seus elementos filhos?

Consegui fazer com que a div não fosse removida ao clicar nela, mas a remoção ainda é feita se clicar em um de seus filhos, o que não é o esperado.

const div = document.body.firstElementChild;

function ocult(event) {
  if (event.target != div) {
    div.remove();
  }
}

window.addEventListener("click", ocult, true);
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>

2 Respostas 2

4

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 argumento é 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 argumento
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>

1
  • 1
    Excelente reposta, tinha me esquecido disso. Esta deve ser a aceita. :-) Commented 11/06/2021 às 23:09
4

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>

3
  • Maior volta, 100% explicativo e funcional, imaginei que existisse algo com um pouco menos de codigo apenas imaginei mas obrigado, se está é a unica maneira vai servir
    – Adriano
    Commented 11/06/2021 às 22:54
  • Obs não estou julgando nem desmerecendo o codigo, está perfeito, apenas imaginei que existisse tipo um comando que fizessem isso
    – Adriano
    Commented 11/06/2021 às 22:57
  • @Adriano, embora não exista API nativa equivalente à função isChildrenOf, o código pode ser reduzido com a abordagem demonstrada na outra resposta. Commented 11/06/2021 às 23:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .