javascript - 如果用户在 DIV 外部单击，什么脚本 "closes"是 DIV？ (版本 5 或 >，不是 jQuery)

Question

这种一般类型的问题有几个答案，但它们都使用旧脚本或 JQuery。

如果用户点击 DIV 外部，什么脚本会“关闭”DIV？

例如旧代码看起来像这样

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

我相信新代码的第一部分会像这样开始。

document.addEventListener("click", modalOff);

但之后我就卡住了。

function modalOff() {
    if (????) {
document.getElementByClassName('modal-a')[0].classList.remove('modal-b'); }
}

类 model-a 包含 display: none;

类 modal-b 包括 display:block;

通过删除 modal-b DIV 消失。

但我想不通如何告诉浏览器“如果用户在 DIV 外部单击则执行下一步”。我要检查什么？

Answer 1

我假设您想使用 addEventListener 来执行此操作。

//Add an event listener for the click event
document.addEventListener('click', closeModal)

//The function is called when the click is found, e is passed as the event variable
function closeModal(e) {

  //Check if the click target is equal to the modal
  if(e.target != modal)
    #Code to hide modal

}

上面的代码应该可以解决问题。希望这会有所帮助。

“e”表示事件，当触发 vent 监听器时，它会将事件对象传递给您调用的函数。它甚至具有大量属性，例如在本例中被单击的元素。这被存储为“目标”。