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

Question

我似乎无法找到答案，我花了一段时间才把它重新创建为独立的小提琴/笔，但我终于有了。

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

这适用于所有浏览器。

这些隐藏元素具有click和mouseover事件，这些事件在所有浏览器中都可以找到。 但是在firefox版本34中，隐藏元素仍会隐藏它们的事件（click和mouseover）。

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

我怀疑这是D3中的一个错误，但想要第二个意见或者有人指出我的错误。 值得注意的是，设置display:none on the element在firefox 34及以上工作，但是我不觉得问题出现在那里

我创建了一个演示代码的jsbin，有两个橙色图标，一个具有visibility:hidden （你可能需要禁用才能看到它）如果你鼠标悬停在隐藏元素上，则没有任何反应。 但是使用firefox 34可以解雇这些事件。 这是jsBin

任何想法都是为什么它会被解雇？ 我猜测D3问题或firefox错误，但是我想把它修改为修复我的代码以帮助解决其他方面的问题

谢谢

Answer 1

这只是Firefox中的一个错误。 如果你报告我会解决它。

给定指针事件的特定值，我们可以确切地说该元素是否应该接收事件。 如果我们不知道指针事件有什么值，那么该元素可能会或可能不会接收指针事件。 这就是所有规范都试图说的。 这里没有歧义。

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

Answer 2

该规范声明这是正常行为：

根据属性“pointer-events”的值，将“visibility”属性设置为“hidden ”的图形元素仍然可以接收事件。

作为一种解决方法，您可以使用display: none或者将pointer-events: none添加到您的类，其中visibility: hidden 。