1

Existe alguma forma de saber quando algum elemento filho está em foco? Meu problema gira em torno do exemplo abaixo onde preciso que uma div não sofra o blur quando um elemento filho estiver em foco (no caso, qualquer elemento do tipo input que sirva para interação com o usuário ativa o onblur da div):

(function divShow(){
  var div = document.getElementsByTagName('div');
  div.classList.toggle('active');
  div.addEventListener('blur', function(){
    div.classList.toggle('active');
  }, true);
})();
div {display: none}
div.active {display: block}
<div tabindex="-1">
  <header>My Tytle</header>
  <content>Hello world!!!</content>
  <footer>
    <button>My button</button>
  </footer>
</div>

eu consigo identificar quando um elemento de primeiro nível está em foco e possívelmente fazer um if para a ação do blur, mas creio que exista uma maneira mais útil de tratar essa situação.

help?

4
  • 1
    Com jQuery é mais simples, você não está utilizando?
    – KaduAmaral
    Commented 16/06/2015 às 12:05
  • @KaduAmaral, concordo plenamente que com Jquery é mais simples, mas a intenção do trabalho que estou fazendo é utilizar tudo que o javascript pode me fornecer, sem manipular o DOM (por isso estou com Angular). Jquery faz seu tratamento após o carregamento da página, e pesa em questão de tratamento de elementos. =D Commented 16/06/2015 às 12:08
  • 1
    Podes tentar algo com querySelector, ou com a propriedade parent do DOM.
    – KaduAmaral
    Commented 16/06/2015 às 12:25
  • estava pensando em algo relativo ao querySelector mesmo mas vi que ia ficar dando inúmeras voltas... obrigado Commented 16/06/2015 às 16:38

1 Resposta 1

3

Esse é o comportamento padrão, mas com uma condição você pode evitar esse comportamento.

var div = document.getElementsByTagName('div')[0];
div.classList.toggle('active');
div.addEventListener('blur', function(e){
  if (isChild(e.relatedTarget, this) || e.relatedTarget === this) {
    e.preventDefault();
    return;
  }
  div.classList.toggle('active');
}, true);

function isChild(child, parent) {
  while (child && (child = child.parentNode) && child !== parent);
  return !!child;
}
div {
  display: none;
}
div.active {
  display: block;
}
<div tabindex="-1">
  <header>My Tytle</header>
  <content>Hello world!!!</content>
  <footer>
    <button>My button</button>
  </footer>
</div>

A condição verifica se o elemento que causou o blur (e.relatedTarget) é filho ou igual ao elemento que escuta o evento e previne o comportamento padrão com event.preventDefault();

Resultado esperado: ao clicar sobre qualquer elemento da <div> ele continua visível, ao clicar fora ela é ocultada.

1
  • excelente, obrigado, funcionou 100% na minha solução Commented 16/06/2015 às 16:39

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 .