Event.target ne fonctionne pas lorsque vous cliquez à l'extérieur de la div pour le fermer

Question

J'ai une div principale et la div sous qui est également appelée forme parce que la forme est enveloppée à l'intérieur de div. Je veux est de fermer le formulaire quand on clique à l'extérieur de la div principale, mais ça ne se passe pas du tout. S'il vous plaît, aidez-moi à résoudre ce problème.

var btn = document.getElementById('opener'); 
 
var box = document.getElementById('abc'); 
 
var form = document.getElementById('def'); 
 

 
btn.onclick = function(){ 
 
\t box.style.display = "block"; 
 
} 
 

 
//Doesn't work. It's function is to close the form when click outside of the div. 
 
window.onclick = function(event){ 
 
\t if(event.target == box){ 
 
    \t form.style.display = "none"; 
 
    } 
 
}

#abc{ 
 
    display: none; 
 
    background-color: #F44336; 
 
}

\t <button id = "opener"> 
 
    Open 
 
    </button> 
 
    <div id = "abc"> 
 
\t \t <!-- Login Authentication --> 
 
\t \t <div id = "def"> 
 
\t \t \t <div> 
 
\t \t \t \t <p>Welcome</p> 
 
\t \t \t </div> 
 
\t \t \t <br /> 
 
\t \t \t <div class = "login-auth" id = "cool"> 
 
\t \t \t \t \t <form method="POST"> 
 
\t \t <label>Email or Username:</label> 
 
\t \t <input type = "text"> 
 
\t \t <br /> 
 
\t \t <label>Password:</label> 
 
\t \t <input type = "password"> 
 
\t \t <br /><br /> 
 
\t \t <input type="submit" value="Login"> 
 
\t </form> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

jsFiddle Lien ici: https://jsfiddle.net/twrvpp3d/

Answer 1

Votre code fonctionne bien, le seul problème que vous devez arrêter l'événement click de se propager en utilisant e.stopPropagation() pour le bouton et le menu contextuel fenêtre, cela va créer l'effet désiré! Reportez-moi mon extrait ci-dessous!

#def{ 
    border:1px solid black; 
} 
#abc{ 
    padding:40px; 
} 

var btn = document.getElementById('opener'); 
 
var box = document.getElementById('abc'); 
 
var form = document.getElementById('def'); 
 

 
btn.onclick = function(e) { 
 
    e.stopPropagation(); 
 
    box.style.display = "block"; 
 
} 
 
box.onclick = function(e) { 
 
    e.stopPropagation(); 
 
} 
 

 
//Doesn't work. It's function is to close the form when click outside of the div. 
 
window.onclick = function(event) { 
 
    box.style.display = "none"; 
 
}

#abc { 
 
    display: none; 
 
    background-color: #F44336; 
 
} 
 

 
#def { 
 
    border: 1px solid black; 
 
} 
 

 
#abc { 
 
    padding: 40px; 
 
}

<button id="opener"> 
 
    Open 
 
</button> 
 
<div id="abc"> 
 
    <!-- Login Authentication --> 
 
    <div id="def"> 
 
    <div> 
 
     <p>Welcome</p> 
 
    </div> 
 
    <br /> 
 
    <div class="login-auth" id="cool"> 
 
     <form method="POST"> 
 
     <label>Email or Username:</label> 
 
     <input type="text"> 
 
     <br /> 
 
     <label>Password:</label> 
 
     <input type="password"> 
 
     <br /> 
 
     <br /> 
 
     <input type="submit" value="Login"> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

window.onclick ne fonctionne pas sur certains navigateurs. Essayez plutôt document.onclick.

Answer 3

Je sais que ce n'est pas ce que vous demandez, mais pouvez-vous faire le bouton bascule? C'est plus facile à faire et plus évident pour l'utilisateur.

var btn = document.getElementById('opener'); 
 
var box = document.getElementById('abc'); 
 
var form = document.getElementById('def'); 
 

 
btn.onclick = function(e){ 
 
    
 
    
 
    if(e.target.innerHTML === 'Open'){ 
 
    box.style.display = "block"; 
 
    e.target.innerHTML = "Close" 
 
    }else{ 
 
     box.style.display = "none"; 
 
    e.target.innerHTML = "Open" 
 
    } 
 
\t 
 
} 
 

 
//Doesn't work. It's function is to close the form when click outside of the div. 
 
window.onclick = function(event){ 
 
\t if(event.target == box){ 
 
    \t form.style.display = "none"; 
 
    } 
 
}

#abc{ 
 
    display: none; 
 
    background-color: #F44336; 
 
}

\t <button id = "opener"> 
 
    Open 
 
    </button> 
 
    <div id = "abc"> 
 
\t \t <!-- Login Authentication --> 
 
\t \t <div id = "def"> 
 
\t \t \t <div> 
 
\t \t \t \t <p>Welcome</p> 
 
\t \t \t </div> 
 
\t \t \t <br /> 
 
\t \t \t <div class = "login-auth" id = "cool"> 
 
\t \t \t \t \t <form method="POST"> 
 
\t \t <label>Email or Username:</label> 
 
\t \t <input type = "text"> 
 
\t \t <br /> 
 
\t \t <label>Password:</label> 
 
\t \t <input type = "password"> 
 
\t \t <br /><br /> 
 
\t \t <input type="submit" value="Login"> 
 
\t </form> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>