Закрыть Div или меню при нажатии снаружи W / Javascript

Если вы программируете в Javascript, вы, вероятно, сталкивались с ситуацией, когда вы хотите, чтобы меню открывались по щелчку и закрывались, когда пользователь щелкает за пределами меню. Я разработал довольно простой способ сделать это. Я добавляю прослушиватель событий в тело документа. Когда кто-то щелкает по нему, мы ищем целевой идентификатор события. Если он совпадает с идентификатором div коробки, то ничего не делать. Если это не так, закройте меню.

Если пойти немного дальше, неэффективно оставлять прослушиватель событий щелчка по всему телу, когда он не используется. В этом случае, если меню еще не было открыто, нет смысла прослушивать щелчок за пределами меню. Добавьте прослушиватель событий в обратный вызов показываемого div. В том же духе, когда div снова скрывается, удалите прослушиватель событий.

Показать Div
Нажмите внутри черного ящика, ничего не происходит. Нажмите снаружи, он исчезает
$ ( '# Showbox'). Нажмите (функция () {
$ ( '# BigBox'). Показать (функция () {
document.body.addEventListener ('click', boxCloser, false);
});
});
function boxCloser (e) {
if (e.target.id! = 'bigbox') {
document.body.removeEventListener ('click', boxCloser, false);
$ ( '# BigBox') скрыть ().
}
}

Также убедитесь, что вы включили jQuery в свой проект, так как некоторые из перечисленных выше функций используют эту библиотеку.

Ссылка на основную публикацию