Tengo un formulario que aparece cuando doy a un botón y desaparece cuando le doy a este mismo lo tengo dentro de un div. Quiero que desaparezca cuando se da click fuera de este pero no me funciona ni el blur, ni el focus out,ni mouse out.
window.addEventListener("load",init);
function init(){
document.getElementById('login').addEventListener("click",form);
document.getElementById('div-form').addEventListener("focusout",ocultarform);
}
function form(){
let formvisibility= document.getElementById("div-form").style.visibility;
console.log(formvisibility);
if(formvisibility=="" || formvisibility=="hidden"){
document.getElementById("div-form").style.visibility="visible";
}else{
document.getElementById("div-form").style.visibility="";
}
}
function ocultarform(){
console.log("1")
document.getElementById("div-form").style.visibility="hidden";
}
.div-form
se trata de un<div>
. Ten en cuenta que no todos los elementos pueden ser enfocados, por lo que si no pueden ser enfocados no puedes detectar cuando pierden el foco (el<div>
no es un elemento enfocable en cambio un<input>
o un<a>
si).