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?