什么脚本＆＃34;关闭＆＃34;如果用户点击它之外的DIV？ （版本5或＆gt;，而不是jQuery）

Question

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

什么脚本＆＃34;关闭＆＃34;如果用户点击它外面的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消失。

但我无法理解如何告诉浏览器＆＃34;如果用户点击DIV外部，请执行下一步操作。＆＃34;我在检查什么？

Answer 1

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

如你所说，如果不点击目标，你想要隐藏...

或者更一般：

function hideOnOutsideClick(el){
  return function(event){
     var modal=document.getElementById(el);
      if (event.target != modal) {
        modal.style.display = "none";
      }
  }
}

所以你可以这样做：

window.addEventListener("click",hideOnOutsideClick("someid"));

Answer 2

在modalOff函数中，您需要检查用户是否在模态中单击了模态或元素。所以你需要做这样的事情：

// check if you clicked on the modal or an object within the modal
var target = event.target;
while (target && target !== document.body && target !== modal) {
    target = target.parentNode;
}
if (target !== modal) {
    // close the modal here
}

如果用户点击了模态中的任何位置，那么在循环结束时，target === modal;如果他们点击模态之外，那么target !== modal。

Answer 3

我假设您要使用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

}

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

＆＃34; e＆＃34;表示事件，当触发通气监听器时，它将事件对象传递给您调用的函数。这甚至有很多属性，例如在这种情况下点击的元素。它存储为＆＃34; target＆＃34;。