Как отключить внешние клики, когда элемент виден?

Question

У меня есть div, divDialog, который содержит простое диалоговое окно. Она начинает жизнь невидимой, но в определенный момент я делаю это видимым. На странице есть несколько других элементов (меню и т. Д.), Которые имеют прослушиватели событий для события click.

Мой вопрос: как только divDialog станет видимым, как я могу отключить все события щелчка для всего, кроме divDialog? Конечно, когда divDialog снова станет невидимым, я бы хотел восстановить нормальное поведение всех слушателей.

Я прочитал этот элегантный ответ , но он не отключает внешние щелчки и не является кроссплатформенным.

У меня есть подпрограмма, которая определяет, является ли узел предком другого:

function isAncestorOf(ancestor, descendant) {...}

... и это может быть необходимо в решении. Но у меня проблемы с прослушивателями событий, пузырями, захватом и кроссплатформенным поведением (кажется, не могу понять это для IE).

Я не использую jquery для этого; просто обычный старый javascript.

Есть предложения?

Answer 1

Вы должны поместить прозрачное фиксированное div поверх окна. Таким образом, любой щелчок на экране будет тем div, а не элементами под ним. Это обычно используется в качестве наложения фона для модального диалога. В IE вам необходимо убедиться, что для позиции: объявлено! DOCTYPE исправлено.

div#overlay {
   position:fixed;
   top:0;
   left:0;
   height:100%;
   width:100%;
   z-index:100;
   background-color:#444444;
   opacity:0.5;
   filter:alpha(opacity=50);
}

И вам нужно убедиться, что у divDialog z-индекс больше, чем у оверлея.

Answer 2

event.preventDefault остановит всплывание события.