Какой сценарий «закрывает» DIV, если пользователь щелкает за его пределами? (версия 5 или>, а не jQuery)

Question

Какой сценарий «закрывает» DIV, если пользователь щелкает за его пределами? (версия 5 или>, а не jQuery)

1

Этот общий тип вопросов имеет несколько ответов, но все они используют старый скрипт или 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'); }
}

class model-a содержит display: none;

класс modal-b включает display:block;

удалив modal-b DIV исчезает.

Но я не могу понять, как рассказать обозревателю "если пользователь щелкает за пределы DIV, сделайте следующий шаг". Что я проверяю?

DR01D 02 июнь 2017, в 21:14

Источник

Теги:

javascript

3 ответа

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"));

Jonas Wilms 02 июнь 2017, в 16:55

0

Это «старый код», как говорит OP, я думаю, что OP хочет использовать addEventListener
Jonathan Bartlett 02 июнь 2017, в 19:10

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.

Jack A. 02 июнь 2017, в 16:17

Ещё вопросы

Это «старый код», как говорит OP, я думаю, что OP хочет использовать addEventListener

Jonathan Bartlett · Accepted Answer · 2017-06-02T17-40-00.000Z

Я предполагаю, что вы хотите использовать 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" означает событие, когда запущен прослушиватель вентиляции, он передает объект события в вызываемую вами функцию. Это даже имеет нагрузку свойств, таких как элемент, который в этом случае был нажат. Это сохраняется как "цель".

Привет Джонатан, что означает "е" на моей странице? Я думаю, что это единственная часть, которую я не понимаю. Благодаря тонну!