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>