单击div外部时，Event.target无法正常工作以关闭它

Question

我有一个主div和sub div，也称为form，因为form包含在div中。我想要的是在主div之外点击时关闭表单，但它根本没有发生。请帮我解决这个问题。

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

btn.onclick = function(){
	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){
	if(event.target == box){
  	form.style.display = "none";
  }
}

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

	<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>

JSFiddle Link Here：https://jsfiddle.net/twrvpp3d/

Answer 1

您的代码运行正常，您需要通过使用e.stopPropagation()按钮和弹出窗口来阻止Click事件传播，这将创建所需的效果！请参阅下面的代码段！

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

＆＃13;

＆＃13;

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";
}

＆＃13;

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

#def {
  border: 1px solid black;
}

#abc {
  padding: 40px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我知道这不是你问的问题，但你可以制作切换按钮吗？它更容易做，对用户来说更明显。

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"
    }
	
}

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

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

	<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 3

window.onclick无法在某些浏览器上运行。请改为document.onclick。