Javascript事件处理程序多个目标

我在一个页面上有多个modals的javascript事件处理程序。目标是在用户单击外部模式时关闭该框

一个页面上最多可能有4个情态动词，有些有2个，有些有3个。当我有一个包含所有4个模态的页面时，这个函数非常有效。当我只有2到3个时，问题就来了。该功能可用于第一个盒子，但不会用于第三个盒子

无论页面上有什么模态，我都需要启动它

document.onclick = function(event) {
if (event.target == modal || event.target == modal2 || event.target == modal3 || event.target == modal4) {
event.target.style.display = "none";
}
}

---

试试这样的方法。每次创建或删除模态时，请从模态数组中删除其id。由于所有模态的处理方式都是相同的，因此您只需循环它们，而无需再次复制粘贴init代码

这里的关键是使用ID，而不是实际的元素，因为在原始代码中，添加或删除模式时，还必须编辑document.onclick函数

   var modals = ["myModal_1", "myModal_2", "myModal_3", "myModal_4"];
    modals.forEach(function( id, index ) {
        var modal = document.getElementById(id),
            btn = document.getElementById('m' + id.slice(3)),
            span = document.getElementsByClassName("close")[index];
        btn.onclick = function() {
            modal.style.display = "block";
        }
        span.onclick = function() {
            modal.style.display = "none";
        }   
    });
    document.onclick = function(event) {
        if (modals.indexOf(event.target.id) !== -1) {
            event.target.style.display = "none";
        }
    }

步骤：

设置

---

请提供JSFIDLE链接您应该调试并检查event.target中的内容，当您有3个模态时，或者提供FIDLE，您应该在页面上保留3个模态，这将帮助我们回答您使用ID而不是直接对象。您的代码失败，因为您试图比较不存在的对象。在获取对象之前检查id是否存在。保存id而不是保存元素。

<div id="modal">Modal</div>
...
<div id="modal4">Modal 4</div>

document.onclick = function(event) {
var x=event.target.getAttribute("id");
if ( x == 'modal' || x == 'modal2' || x == 'modal3' || x == 'modal4') {
event.target.style.display = "none";
}
}