模式窗口在外部单击时关闭

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）定义事件发生的位置，click事件发生在窗口上，那么为什么要检查event.target事件是否发生在模式上？我的意思是为什么我们不检查event.target是否在模态之外还是if(event.target!==modal)？

Answer 1

我建议您在遇到困难时始终使用开发工具。这也是我初学HTML元素时的改进方式。图片的帮助下，我会为您澄清。

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

为了使您更加清楚，我单击了background-color属性以查看#myModal的确切位置。如您在此处看到的，只要用户单击此黑色空间。该模式将被关闭。