javascript - D3 事件在隐藏的 svg 元素上触发

Question

我似乎找不到这个问题的答案，我花了一段时间将它重新创建为一个独立的 fiddle /笔，但我终于找到了。

我正在开发使用 D3 绘制和操作 svg 图形的 Vaadin 应用程序。 在某一点上，屏幕上有 svg，它具有 visibility:hidden。

这在所有浏览器中都能完美地找到。

这些隐藏元素有点击和鼠标悬停事件，在所有浏览器中都能找到 但是在 firefox 版本 34 中，隐藏元素仍然会在它们仍然隐藏时触发它们的事件(单击和鼠标悬停)。

为了更好地解释:当一个按钮被隐藏时，它的鼠标悬停事件不应该触发，当它可见时应该触发。这就是它在所有浏览器中的工作方式，除了 firefox 34、35 beta 和 36 开发版。它在 Firefox 31 中运行良好。

我怀疑这是 D3 中的一个错误，但想要第二个意见或有人指出我的错误。值得注意的是，在元素上设置 display:none 在 firefox 34 及更高版本中有效，但我不认为问题出在那里

我创建了一个演示代码的 jsbin，有两个橙色图标，一个有 visibility:hidden(您可能需要禁用它才能看到它)如果您将鼠标悬停在隐藏元素上 chrome nothing发生。但是对于 firefox 34，事件会发生。 Here's the jsBin

知道它为什么会火吗？我猜是 D3 问题还是 Firefox 错误，但是我想确定它以修复我的代码以帮助修复其他领域

谢谢

Answer 1

这只是 Firefox 中的一个错误。如果你report it我会修复它。

给定指针事件的特定值，我们可以准确地说出该元素是否应该接收事件。如果我们不知道 pointer-events 有什么值，那么该元素可能会或可能不会接收指针事件。这就是规范试图说明的全部内容。这里没有歧义。

请注意，firefox 错误仅影响 <image>元素。如果将图像替换为 <rect>即使在 Firefox 中，您也应该看到正确的结果。