当我点击输入时，我有 1 个输入区域和一个弹出区域，弹出窗口将显示，当我点击正文中的任何其他地方（弹出窗口和输入除外）时，我希望弹出窗口隐藏。
function show(){
document.getElementById('content').style.display = 'flex'
}*{margin: 0;padding: 0;}
.main{width: 100%;height: 100%;background: rgb(160, 160, 160);}
input {width: 400px;height: 60px;}
.input, #content {display: flex;justify-content: center;padding-top: 20px;}
#content {display:none}
button {width: 150px;height: 50px;margin-top: 20px;}
h2 {background: #000;color: aliceblue;margin-top: 20px;text-align: center;}
.content-inner {width:400px;height: 200px;background: rgb(109, 68, 68);;}<!-- Main -->
<div class="main">
<!-- input -->
<div class="input">
<input type="text" onfocus="show()">
</div>
<!-- Popup -->
<div id="content">
<div class="content-inner" align="center">
<button>Demo Button</button>
<div>
<h2>Demo Heading</h2>
</div>
</div>
</div>
</div>您可以监听文档click事件，然后检查点击是否发生在该input区域或其他地方，然后显示或隐藏模态。
由于您的整个可见div首先是一个divwithclass="input"并且您在其中有一个输入，因此每当click事件不包含输入类时，它应该隐藏模态，反之亦然。
const content = document.getElementById('content');
document.addEventListener("click", function(event) {
if (!event.target.classList.contains("input")) {
content.style.display = 'flex';
} else {
content.style.display = 'none';
}
})* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100%;
background: rgb(160, 160, 160);
}
input {
width: 400px;
height: 60px;
}
.input,
#content {
display: flex;
justify-content: center;
padding-top: 20px;
}
#content {
display: none
}
button {
width: 150px;
height: 50px;
margin-top: 20px;
}
h2 {
background: #000;
color: aliceblue;
margin-top: 20px;
text-align: center;
}
.content-inner {
width: 400px;
height: 200px;
background: rgb(109, 68, 68);
;
}<!-- Main -->
<div class="main">
<!-- input -->
<div class="input">
<input type="text">
</div>
<!-- Popup -->
<div id="content">
<div class="content-inner" align="center">
<button>Demo Button</button>
<div>
<h2>Demo Heading</h2>
</div>
</div>
</div>
</div>此外，如果在任何情况下，你要关闭的模式，如果click事件发生的模式本身或以外的任何地方input，你可以检查另一个条件区域，看看是否click事件发生里面div有id="content"或没有。
所以最终的代码应该是这样的：
const content = document.getElementById('content');
document.addEventListener("click", function(event) {
if (!event.target.classList.contains("input") && event.target.id !== "content") {
content.style.display = 'flex';
} else {
content.style.display = 'none';
}
})* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100%;
background: rgb(160, 160, 160);
}
input {
width: 400px;
height: 60px;
}
.input,
#content {
display: flex;
justify-content: center;
padding-top: 20px;
}
#content {
display: none
}
button {
width: 150px;
height: 50px;
margin-top: 20px;
}
h2 {
background: #000;
color: aliceblue;
margin-top: 20px;
text-align: center;
}
.content-inner {
width: 400px;
height: 200px;
background: rgb(109, 68, 68);
;
}<!-- Main -->
<div class="main">
<!-- input -->
<div class="input">
<input type="text">
</div>
<!-- Popup -->
<div id="content">
<div class="content-inner" align="center">
<button>Demo Button</button>
<div>
<h2>Demo Heading</h2>
</div>
</div>
</div>
</div>因此，如果您想向模态内的内容添加另一个侦听器，您可以像这样为它定义另一个事件侦听器：
const content = document.getElementById("content");
const button = document.querySelector("button");
const contentInner = document.querySelector(".content-inner");
document.addEventListener("click", function(event) {
if (!event.target.classList.contains("input") && event.target.id !== "content") {
content.style.display = 'flex';
} else {
content.style.display = 'none';
}
})
button.addEventListener("click", function() {
const span = document.createElement("span");
const text = document.createTextNode("newer span");
span.append(text);
contentInner.append(span)
})* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: 100%;
background: rgb(160, 160, 160);
}
input {
width: 400px;
height: 60px;
}
.input,
#content {
display: flex;
justify-content: center;
padding-top: 20px;
}
#content {
display: none
}
button {
width: 150px;
height: 50px;
margin-top: 20px;
}
h2 {
background: #000;
color: aliceblue;
margin-top: 20px;
text-align: center;
}
.content-inner {
width: 400px;
height: 200px;
background: rgb(109, 68, 68);
;
}<!-- Main -->
<div class="main">
<!-- input -->
<div class="input">
<input type="text">
</div>
<!-- Popup -->
<div id="content">
<div class="content-inner" align="center">
<button>Demo Button</button>
<div>
<h2>Demo Heading</h2>
</div>
</div>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句