模态 window 点击外部关闭

Question

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

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

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

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

Answer 1

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

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

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