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

Question

这些是我编写的代码，当用户单击模式之外的任何位置时，将其关闭，但它不起作用。我的代码出了什么问题。“box-search”、“login”、“register”元素 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>

Answer 1

每次迭代循环时，都会删除 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>