javascript - 这些是我为我编写的代码，当用户单击模态之外的任何位置时，请关闭它，但不起作用。我的代码有什么问题

这些是我为我编写的代码，当用户单击模态之外的任何位置时，请关闭它，但不起作用。我的代码出了什么问题。
“框搜索”，“登录”，“注册”元素ID名称。

<script>
   var modal = ["box-search","login","register"];
   for(var i=0;i<3;i++) {
      window.onclick = function(event) {
         if (event.target == modal[i]) {
            modal[i].style.display = "none";
         }
      }
   }
</script>

最佳答案

每次迭代循环时，您都要清除window.onclick的最后一个值，并将一个新函数设置为其值。使用.addEventListener()注册事件处理程序。

话虽如此，您在回调函数中使用i时遇到了问题，因为i在更高的级别上声明，因此围绕它创建了一个闭包。您可以阅读有关闭包here的更多信息。闭包导致事件处理函数都在寻找modal[3]，因为这是循环退出时最后一个设置为i的值。

为避免关闭并更正window.onclick的覆盖，脚本应为：

<script>
   // Use modern standards to set up event handlers:
   window.addEventListener("click", testModal)

   function testModal(event){
     var modal = ["box-search","login","register"];

     // Use the built-in Array.prototype.forEach method to loop
     // through the array elements, thus avoiding a numeric counter
     modal.forEach(function(element){
         // Search the DOM for elements that have id'sthat
         // match the modal array's id's
         var el = document.getElementById(element);

         // Check the found element
         if (event.target == el) {
            el.style.display = "none";
         }
     });

   }
</script>

关于javascript - 这些是我为我编写的代码，当用户单击模态之外的任何位置时，请关闭它，但不起作用。我的代码有什么问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42398588/