Получают ли элементы управления в Firefox события мыши, когда их свойство visible в CSS имеет значение false?

Question

У меня проблема с FIREFOX. У меня есть невидимый элемент управления списком над раскрывающимся списком (html 'select'). Не возражаю, почему, но я скажу, что верхний слой - это всплывающее окно, которое появляется как часть другого пользовательского элемента управления.

Несмотря на то, что он скрыт, он не позволяет мне щелкнуть базовый раскрывающийся элемент управления, поэтому базовый элемент управления кажется отключенным. Это не отключено, потому что я могу перейти на него. Я просто не могу нажать на нее. Я знаю, что это наложение вызывает проблему, потому что я переместил базовый элемент управления в сторону, и он снова работает.

Это ошибка в Firefox? Это не похоже на установку значения прозрачности; это вообще отключает рендеринг элемента управления, поэтому я не думаю, что такой невидимый элемент управления должен перехватывать события мыши. Такое поведение не возникает в Internet Explorer.

Возможно, есть другое свойство CSS, которое я могу установить в JavaScript, чтобы переключать его способность захвата событий мыши вместе с его видимостью.

dd = document.getElementById('lstStudents');
if (dd.style.visibility == 'hidden') dd.style.visibility = 'visible'; else dd.style.visibility = 'hidden';

Обновление: я только что прочитал описание значения видимости CSS «скрытый», которое гласит «Элемент невидим (но все еще занимает место)». Так что я думаю, мне придется установить его высоту на ноль вместе с настройкой его видимости, чтобы решить эту проблему.

Answer 1

измените z-индекс элемента управления над слоем, скажем, на -1. style = "z-index: -1;" Это поместит его под всем, что позволит прямой доступ к раскрывающемуся. Возможно, вам придется динамически изменять z-индекс, чтобы при наведении отображать верхний слой сверху.

Подробнее

Answer 2

То, как я делал всплывающие окна раньше в Firefox, было со свойствами CSS.

z-index: 500;
display: block;

, чтобы показать элемент, и

z-index: -10;
display: none;

чтобы скрыть это.

Теперь. Мои значения для z-index экстремальны, но я выбрал именно это. Это работает для меня, но мое приложение предназначалось специально для Firefox; Я использую свойство display, которое, как вы заявили, вы хотите избежать.

Если вы беспокоитесь об использовании display: block или display: hidden, я думаю, возможно, вы могли бы попытаться поиграть с позиционированием или определением размера элемента.

Либо сделайте всплывающий элемент абсолютно позиционированным и переместите его за пределы экрана, когда он невидим, либо, возможно, попробуйте сделать его шириной 0px и высотой 0px, когда он невидим. Это две вещи, которые я мог бы изучить, если бы у меня все еще были проблемы. Я не уверен, что рекомендую их как лучшие решения.

Действительно подумайте, сколько экземпляров ваших всплывающих элементов будут иметь разные отображаемые значения. Я обнаружил, что в моем случае используются только два типа: «none» и «block». Возможно, вам будет достаточно манипулировать свойством display.

Надеюсь, это поможет.

Answer 3

Как вы прячете элемент? Если я правильно помню, «visibility: hidden» должен (правильно) работать так, как вы описываете, а «display: none» полностью изгонит рендеринг.

Если причина не в этом, можете ли вы с помощью панели инструментов веб-разработчика подтвердить, что это действительно невидимый элемент управления, вызывающий проблему, а не другой, у которого непрозрачность установлена ​​на 0 или что-то еще?