在 mousedown 处理程序中更改可见性属性时，在 Safari 或 Firefox 中不会触发单击处理程序答案

【问题标题】：When changing visibility attribute in mousedown handler, click handler is not triggered in Safari or Firefox在 mousedown 处理程序中更改可见性属性时，在 Safari 或 Firefox 中不会触发单击处理程序
【发布时间】：2016-06-30 06:51:48
【问题描述】：

我在包含其他<div>s 的<div> 上注册了一个单击处理程序和一个鼠标按下处理程序。默认情况下，内部<div> 设置为visibility: hidden。在mousedown 处理程序中，visibility 设置为visible。

问题在于，在 Safari 和 Firefox 中，单击处理程序不会在您第一次单击 outer <div> 时触发。在 Chrome 中，点击处理程序会触发。

我做了一个简化的测试用例：https://jsbin.com/hequku/edit?html,css,js,output

有趣的是，如果不是操纵visibility 属性而是操纵opacity 属性，跨浏览器的差异就会消失。

我想弄清楚的是：

这在浏览器之间是否会有所不同？如果不是，符合规范的行为是什么？
我是否遗漏了一些关于在 click 和 mousedown 处理程序中应该和不应该做的事情？

【问题讨论】：

在 FF 中为我工作，确保在 DOM 准备就绪时触发绑定函数，并且当您尝试绑定这些事件处理程序时，附加事件处理程序的元素实际上在 DOM 中。
@Arbel 所以当您使用提供的示例时，点击事件会触发吗？你能分享你正在使用的 Firefox 的版本/平台吗？
我在 FF 44.0.2/Win 8.1 上运行了测试

标签： javascript css google-chrome firefox safari

【解决方案1】：

“可见性：隐藏”适用于“尚未或不再”相关的内容。所以我猜浏览器不会为不相关的内容触发点击事件。尝试改用“显示：无”。

【讨论】：

感谢您的建议。我使用visibility: hidden 的原因是我希望布局空间被元素占用。使用display: none 会折叠布局空间，这不适合我的目的。

【解决方案2】：

这个 W3 School 链接讨论了visibility:hidden 如果有的话仍然会占用空间。我之前遇到过这个问题，这与某些浏览器如何将hidden 视为禁用有关；因此，为什么您的事件不会触发。使用opacity 是解决此问题的方法。
我相信在visibility:hidden 上未触发的事件是正确的响应。另外，请查看this 问答。

【讨论】：