Anonim

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

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

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

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

Закрыть div или меню по клику за пределами w / javascript