Skip to main content
conteúdo editado
Fonte Link
Luiz Felipe
  • 36,5mil
  • 10
  • 74
  • 154

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>

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âmetro é 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âmetro
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>

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>

Fonte Link
Rafael Tavares
  • 5,2mil
  • 11
  • 31
  • 52

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âmetro é 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âmetro
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>