什么脚本"关闭"如果用户点击它之外的DIV? (版本5或>,而不是jQuery)

时间:2017-06-02 19:03:06

标签: javascript

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

什么脚本"关闭"如果用户点击它外面的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外部,请执行下一步操作。"我在检查什么?

3 个答案:

答案 0 :(得分: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"));

答案 1 :(得分:1)

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

答案 2 :(得分: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"表示事件,当触发通气监听器时,它将事件对象传递给您调用的函数。这甚至有很多属性,例如在这种情况下点击的元素。它存储为" target"。