Firefox 中的控件在 CSS 可见属性为 false 时是否接收鼠标事件？答案

【问题标题】：Do controls in Firefox receive mouse events when their CSS visible property is false?Firefox 中的控件在 CSS 可见属性为 false 时是否接收鼠标事件？
【发布时间】：2010-12-17 15:14:59
【问题描述】：

我在使用 FIREFOX 时遇到问题。我对下拉控件（html'select'）有一个不可见的列表控件。不介意为什么，但我会说覆盖层是作为另一个自定义控件的一部分出现的弹出窗口。

即使它是隐藏的，它也会阻止我单击底层下拉控件，从而使底层控件看起来被禁用。虽然它没有被禁用，因为我可以切换到它。我只是无法点击它。我知道这是导致问题的叠加层，因为我将底层控件移到了一边，它又可以工作了。

这是 Firefox 中的错误吗？这不像设置半透明值。它完全禁用了控件的渲染，所以我认为这样一个不可见的控件不应该拦截鼠标事件。此行为在 Internet Explorer 中不会发生。

也许我可以在 JavaScript 中设置一些其他 CSS 属性来切换其鼠标事件捕获能力及其可见性。

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

更新：我刚刚阅读了 CSS 可见性值“隐藏”的描述，内容为“元素不可见（但仍占用空间）”。所以我想我必须将它的高度设置为零以及设置它的可见性来解决这个问题。

【问题讨论】：

如何使“不可见的列表控件”不可见。示例代码？
CSS 可见性属性，通过 javascript 切换。在运行任何 JavaScript 之前，控件的初始样式将可见性设置为“隐藏”。这是 IE 和 Firefox (3.5.5) 之间行为的明显差异。

标签： css firefox drop-down-menu mouseevent visibility

【解决方案1】：

将您的上层控件的 z-index 更改为 -1。样式=“z-index：-1；”这将把它放在所有东西的下面，允许直接访问下拉菜单。您可能必须动态更改 z-index 以在可见时将覆盖层重新置于顶部。

More info

【讨论】：

把它放在所有东西的下面是个好主意，因为它是一个弹出窗口，我可以很容易地将 z-index 设置为一个非常高的值，当它可见时。但是，让我感到困扰的是它可能在它应该被隐藏时接收事件，并且我不想设置两个属性（可见性和 z-index），也不想将其中一个属性设置为任意值，例如“高”z-index。
另外，这不适用于我的情况（可能还有许多其他情况），因为控件嵌套在 div 元素中，这些元素都有自己的 z-index，因此将 z-index 设置为该项目不会与不在同一 div 中的其他控件重叠。

【解决方案2】：

你是如何隐藏元素的？如果我没记错的话，“可见性：隐藏”应该（正确地）按照您描述的方式工作，而“显示：无”将完全消除渲染。

如果这不是原因，您能否使用 Web Developer Toolbar 确认确实是导致问题的不可见控件而不是另一个不透明度设置为 0 或其他东西的控件？

【讨论】：

Display none 可能会起作用，但后来我被困在尝试恢复到可以是任意数量的值（块、内联等）的显示值，我不想在我的javascript中硬编码原始值。我需要一个布尔属性，比如可见性。让我感到难过的是，这在 IE 中有效，但在 Firefox 中无效。
我认为 FF 就在这里，而 IE 是错误的，至少就我对“可见性”属性的理解而言。将原始显示值存储在元素中怎么样？
这似乎是一个很好的解决方法，这就是我正在使用的，但在我确定正确的行为之前，我不会将其标记为答案，因为它在IE 和火狐。这种麻烦就是我使用 Flash 的原因，它非常适合基于 Web 的界面。除了可见和 alpha 属性之外，它还具有特定的 enabled 和 mouseEnabled 属性。
哦，visibility:collapse 怎么样？
根据关于整个“可见性与显示”问题的类似线程，只有 Internet Explorer 8 可能支持折叠...stackoverflow.com/questions/852321/…

【解决方案3】：

我之前在 Firefox 中制作弹出框的方式是使用 CSS 属性。

z-index: 500;
display: block;

显示一个元素，并且

z-index: -10;
display: none;

隐藏它。

现在。我对 z-index 的值是极端的，但这正是我选择的。这对我有用，但我的应用专门针对 Firefox； aaaa 并且我正在使用 display 属性，您说要避免使用它。

如果您担心使用 display:block 或 display:hidden，我认为您可以尝试使用定位或调整元素大小。

要么使弹出元素绝对定位并在不可见时将其移出屏幕，要么尝试使其不可见时为 0px 宽度和 0px 高度。如果我仍然有问题，这是我可能会探索的两件事。我不确定我是否会推荐这些作为最佳解决方案。

真正考虑你的弹出元素有多少实例会有不同的显示值，我发现在我的例子中只使用两种类型，“无”和“块”。也许操作 display 属性对你来说就足够了。

希望这会有所帮助。

【讨论】：

当元素嵌套在不同的容器 div 元素中时，Z-index 将无济于事。 Display:none 实际上是最吸引人的解决方法，简单地将高度设置为零也是一个很好的解决方法。实际上，我曾经只使用 height 属性来隐藏它，但是在没有将可见性设置为隐藏的情况下，它显得很有趣。我摆脱了调整高度的代码，认为它是矫枉过正的，因为我让它不可见......这就是我遇到这个问题的时候。我现在坚持使用 display:none，因为它似乎在两种浏览器上都能正常工作。