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

У меня проблема с 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, которое гласило: «Элемент невидим (но все еще занимает место)». Поэтому, я думаю, мне придется установить его высоту на ноль вместе с настройкой видимости, чтобы решить эту проблему.


drop-down-menu css visibility firefox mouseevent
person Triynko    schedule 17.11.2009    source источник
comment
Как вы делаете «невидимый элемент управления списком» невидимым. Образец кода?   -  person Mike Mytkowski    schedule 18.11.2009
comment
Свойство видимости CSS, переключаемое через javascript. Первоначальный стиль элемента управления имеет скрытую видимость до того, как на нем будет запущен какой-либо JavaScript. Это ЯВНАЯ разница в поведении между IE и Firefox (3.5.5).   -  person Triynko    schedule 18.11.2009

Ответы (3)


arrow_upward
1
arrow_downward

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

Подробнее

person Alex Polkhovsky    schedule 17.11.2009
comment
Размещение его под всем — отличная идея, и, поскольку это всплывающее окно, я мог бы легко установить z-индекс на какое-то очень высокое значение, когда он виден. Однако меня беспокоит, что он может получать события, хотя он должен быть скрыт, и я не хочу устанавливать два свойства (видимость и z-index), а также не хочу устанавливать одно из этих свойств на произвольное значение, такое как высокий z-индекс. - person Triynko; 18.11.2009
comment
Кроме того, это не сработает в моей ситуации (и, возможно, во многих других), потому что элемент управления вложен внутри элементов div, каждый из которых имеет свои собственные z-индексы, поэтому установка z-индекса для элемента не будет иметь значения. поскольку он перекрывает другие элементы управления, которые не находятся в том же div. - person Triynko; 18.11.2009

arrow_upward
0
arrow_downward

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

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

person Pekka    schedule 17.11.2009
comment
Display none, вероятно, не сработает, но тогда я застрял, пытаясь восстановить отображаемое значение, которое может быть любым количеством значений (блочным, встроенным и т. д.), и я не хочу жестко кодировать это исходное значение в моем JavaScript. Мне нужно логическое свойство, такое как видимость. Меня огорчает, что это работает в IE, но не в Firefox. - person Triynko; 18.11.2009
comment
Я думаю, что FF здесь прав, а IE ошибается, по крайней мере, насколько я понимаю атрибут видимости. Как насчет сохранения исходного отображаемого значения в элементе? - person Pekka; 18.11.2009
comment
На данный момент это кажется хорошим обходным путем, и это то, что я использую, но я не собираюсь отмечать его как ответ, пока не удостоверюсь в правильном поведении, поскольку оно отличается между IE и Firefox. Именно из-за таких проблем я использую Flash, который прекрасно работает с веб-интерфейсами. Он имеет определенные свойства enable и mouseEnabled в дополнение к свойствам visible и alpha. - person Triynko; 18.11.2009
comment
а как насчет visibility:collapse? - person Pekka; 18.11.2009
comment
Свертывание может поддерживаться только в Internet Explorer 8 в соответствии с этой аналогичной веткой по всей этой проблеме видимости и отображения... " title="visibilitycollapse in javascript"> stackoverflow.com/questions/852321/ - person Triynko; 18.11.2009

arrow_upward
0
arrow_downward

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

z-index: 500;
display: block;

показать элемент и

z-index: -10;
display: none;

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

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

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

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

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

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

person Mike Mytkowski    schedule 17.11.2009
comment
Z-индекс не поможет, когда элементы вложены в разные элементы контейнера div. Display:none на самом деле является наиболее привлекательным обходным решением, и простая установка высоты на ноль также была бы хорошим обходным решением. На самом деле я использовал только свойство height, чтобы скрыть его, но оно выглядело забавно, если для видимости не было установлено значение hidden. Я избавился от кода для регулировки высоты, полагая, что это излишество, так как я делал его невидимым... и вот тогда я столкнулся с этой проблемой. Я пока использую display:none, так как он работает корректно в обоих браузерах. - person Triynko; 18.11.2009