Event.target无法正常工作，当单击关闭它的外部

Question

我有一个主要的div和子div也被称为形式，因为表单被包裹在div内。我想要的是在主div之外单击时关闭窗体，但完全没有发生。请帮我解决这个问题。

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链接在这里：https://jsfiddle.net/twrvpp3d/

Answer 1

您的代码工作正常，你需要使用e.stopPropagation()的按钮，并在弹出的传播阻止点击事件的唯一问题窗口，这将创建所需的效果！请参阅我的下面的代码段！

#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不会对某些浏览器。改为尝试document.onclick。

Answer 3

我知道这不是你在问什么，但你可以做出切换按钮？它更容易做和更明显的用户。

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>