javascript - 当用户在 JavaScript 中单击外部时无法关闭弹出窗口

Question

我有疑问，因为我的网站上的 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)，我想让它们全部工作!!!

我需要你的帮助!

Answer 1

您无法使用 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";
    }
}