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 ele<div>
ele continua visível, ao clicar fora ela é ocultada.