单击外部时关闭模态窗口

Question

我是 JavaScript 新手，所以我需要解释一下代码是如何工作的。在w2Schools中有一个模态窗口代码https://www.w3schools.com/howto/howto_css_modals.asp，其中有一个函数——

// 当用户点击模态框外的任意位置时，关闭它

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

它是如何工作的？ function(event) 定义事件发生的位置，单击事件发生在窗口上，那么为什么要检查 event.target 事件是否发生在模态上？我的意思是为什么我们不检查event.target 是否在模态之外或if(event.target!==modal)？

Answer 1

我建议您在遇到困难时始终使用开发工具。当我还是初学者时，这就是我在 html 元素上改进自己的方式。我会借助图片为您说清楚。

正如我们已经知道var modal = document.getElementById("myModal"); 的模态是什么，我们需要单击 id 为 myModal 的 div。这就是一张照片。

为了让您更清楚，我单击了background-color 属性以查看#myModal 的确切位置。正如您在此处看到的，每当用户单击此黑色空间时。模态将关闭。