Javascript window.onclick = function(event) 仅适用于第一项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45393553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
window.onclick = function(event) only works for first item
提问by rpivovar
这是我完整代码的jsfiddle，您可以在其中测试两个模态的功能。在第二个模态外单击将关闭它，而在第一个模态外单击不会关闭它。
I have two modal pop-up windows on an HTML page, and after they're opened, they can be closed by clicking outside of the modal with this code:
我在 HTML 页面上有两个模态弹出窗口，打开它们后，可以通过使用以下代码在模态外单击来关闭它们：
// When user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
For some reason, this code only works for the second (last) instance of it in my script.js file. You can see that there are really just two blocks of code in this file: the first controls the first modal, and the second controls the second modal. Each instance of the code above is at the end of the block.
出于某种原因，此代码仅适用于我的 script.js 文件中的第二个（最后一个）实例。你可以看到这个文件中实际上只有两个代码块：第一个控制第一个模态，第二个控制第二个模态。上面代码的每个实例都位于块的末尾。
// Get modalCompanies
var modalCompanies = document.getElementById('companiesModal');
// Get button that opens the modalCompanies
var btnCompanies = document.getElementById("companiesOpen");
// Get <spanCompanies> element that closes the modalCompanies
var spanCompanies = document.getElementsByClassName("close")[0];
// When user clicks on the button, open the modalCompanies
btnCompanies.onclick = function() {
modalCompanies.style.display = "block";
}
// When user clicks on <spanCompanies> (x), close modalCompanies
spanCompanies.onclick = function() {
modalCompanies.style.display = "none";
}
// When user clicks anywhere outside of the modalCompanies, close it
window.onclick = function(event) {
if (event.target == modalCompanies) {
modalCompanies.style.display = "none";
}
}
// Get modalPrivacy
var modalPrivacy = document.getElementById('privacyModal');
// Get button that opens the modalPrivacy
var btnPrivacy = document.getElementById("privacyOpen");
// Get <spanPrivacy> element that closes the modalPrivacy
var spanPrivacy = document.getElementsByClassName("close")[1];
// When user clicks on the button, open the modalPrivacy
btnPrivacy.onclick = function() {
modalPrivacy.style.display = "block";
}
// When user clicks on <spanPrivacy> (x), close modalPrivacy
spanPrivacy.onclick = function() {
modalPrivacy.style.display = "none";
}
// When user clicks anywhere outside of the modalPrivacy, close it
window.onclick = function(event) {
if (event.target == modalPrivacy) {
modalPrivacy.style.display = "none";
}
}
What is preventing the window.onclick = function(event) { }function at the end of each block from being functional in both blocks?
是什么阻止了window.onclick = function(event) { }每个块末尾的功能在两个块中都起作用？
回答by Maxim Kuzmin
use
用
window.addEventListener("click", function(event) {
});
instead of
代替
window.onclick = function() {
}
回答by alen
回答by Evelyn Ma
You defined window.onclicktwice in the script, so the first one is overwritted by the later one. Try to move the two actions into one window.onclick, like this:
您window.onclick在脚本中定义了两次，因此第一个被后一个覆盖。尝试将两个操作合二为一 window.onclick，如下所示：
window.onclick = function(event) {
if (event.target == modalCompanies) {
modalCompanies.style.display = "none";
}
if (event.target == modalPrivacy) {
modalPrivacy.style.display = "none";
}
}
回答by azs06
Your second window.onclikoverriding the first one, you could just combine both and use logic to hide different modals.
您的第二个window.onclik覆盖第一个，您可以将两者结合起来并使用逻辑来隐藏不同的模态。
// Get modalCompanies
var modalCompanies = document.getElementById('companiesModal');
// Get button that opens the modalCompanies
var btnCompanies = document.getElementById("companiesOpen");
// Get <spanCompanies> element that closes the modalCompanies
var spanCompanies = document.getElementsByClassName("close")[0];
// When user clicks on the button, open the modalCompanies
btnCompanies.onclick = function() {
modalCompanies.style.display = "block";
}
// When user clicks on <spanCompanies> (x), close modalCompanies
spanCompanies.onclick = function() {
modalCompanies.style.display = "none";
}
// Get modalPrivacy
var modalPrivacy = document.getElementById('privacyModal');
// Get button that opens the modalPrivacy
var btnPrivacy = document.getElementById("privacyOpen");
// Get <spanPrivacy> element that closes the modalPrivacy
var spanPrivacy = document.getElementsByClassName("close")[1];
// When user clicks on the button, open the modalPrivacy
btnPrivacy.onclick = function() {
modalPrivacy.style.display = "block";
}
// When user clicks on <spanPrivacy> (x), close modalPrivacy
spanPrivacy.onclick = function() {
modalPrivacy.style.display = "none";
}
// When user clicks anywhere outside of the modalPrivacy, close it
window.onclick = function(event) {
if (event.target == modalPrivacy) {
modalPrivacy.style.display = "none";
}
if (event.target == modalCompanies) {
modalCompanies.style.display = "none";
}
}/*modal background*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/*modal box*/
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 5px solid #f9cdcd;
width: 80%; /* Could be more or less, depending on screen size */
}
.modal-content p{
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
/*close button*/
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
} <span id="companiesOpen">click companies</span>
<!--companies modal-->
<div id="companiesModal" class="modal">
<!--modal-->
<div class="modal-content">
<span class="close">×</span>
<p>test 1</p>
</div>
</div>
<span id="privacyOpen">click privacy</span>
<!--privacy modal-->
<div id="privacyModal" class="modal">
<!--modal-->
<div class="modal-content">
<span class="close">×</span>
<p>test</p>
</div>
</div>