我有疑问,因为我的网站上的 JS 代码有问题。我在 Js 文件中创建了 7 个弹出窗口,并将该文件附加到我的 index.php 中。当我使用所有这些时,只有最后一个在工作
index.php(片段)
<div id="popupBox_1">
<div class="popupBoxWrapper">
<div class="popupBoxContent">
<h3>Popup 1</h3>
<p>Obecnie przeglądasz okienko 1</p>
</div>
</div>
</div>
<div id="popupBox_2">
<div class="popupBoxWrapper">
<div class="popupBoxContent">
<h3>Popup 2</h3>
<p>Obecnie przeglądasz okienko 2</p>
</div>
</div>
</div>
<div id="popupBox_3">
<div class="popupBoxWrapper">
<div class="popupBoxContent">
<h3>Popup 3</h3>
<p>Obecnie przeglądasz okienko 3</p>
</div>
</div>
</div>
popup.js(片段)
window.onclick = function(event) {
if (event.target == popupBox_1) {
popupBox_1.style.display = "none";
}
}
window.onclick = function(event) {
if (event.target == popupBox_2) {
popupBox_2.style.display = "none";
}
}
window.onclick = function(event) {
if (event.target == popupBox_3) {
popupBox_3.style.display = "none";
}
}
我制作了这些弹出窗口,它们工作正常,但我在 js 中创建了该函数,因为我想在用户单击弹出窗口外部时关闭它们。它只适用于我定义的最后一个(我的意思是 popupBox_3),我想让它们全部工作!!!
我需要你的帮助!
最佳答案
您无法使用 Node.onclick
分配多个点击事件处理程序,每次执行此操作都会覆盖最后一个处理程序。您可以切换到
window.addEventListener('click', function() {
if (event.target == popupBox_1) {
popupBox_1.style.display = "none";
}
});
window.addEventListener('click', function() {
if (event.target == popupBox_2) {
popupBox_2.style.display = "none";
}
});
...etc.
但是将所有三个条件移至一键处理程序中会更有意义:
window.onclick = function(event) {
if (event.target == popupBox_1) {
popupBox_1.style.display = "none";
}
if (event.target == popupBox_2) {
popupBox_2.style.display = "none";
}
if (event.target == popupBox_3) {
popupBox_3.style.display = "none";
}
}
关于javascript - 当用户在 JavaScript 中单击外部时无法关闭弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43215025/