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

D3 events firing on a hidden svg element

本文关键字：D3 事件 元素 隐藏 svg      更新时间：2023-09-26

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

我正在开发Vaadin应用程序，该应用程序使用D3来绘制和操作svg图形。在某一时刻，屏幕上有 svg 有visibility:hidden.

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

这些

隐藏元素具有单击和鼠标悬停事件，这些事件再次适用于所有浏览器然而，在 Firefox 版本 34 中，隐藏元素在仍然隐藏时仍然会触发其事件（单击和鼠标悬停）。

为了更好地解释：当按钮被隐藏时，它的鼠标悬停事件不应该触发，当它可见时应该触发。这就是它在除 Firefox 34、35 测试版和 36 开发版之外的所有浏览器中的工作方式。它在火狐31中工作正常。

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

我创建了一个演示代码的 jsbin，有两个橙色图标，一个有visibility:hidden（您可能需要禁用才能看到它），如果您将鼠标悬停在带有 chrome 的隐藏元素上，则没有任何反应。 但是对于Firefox 34，事件会触发。这是 jsBin

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

谢谢

这只是 Firefox 中的一个错误。如果你报告它，我会修复它。

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

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

规范指出这是正常行为：

根据属性"指针事件"

的值，将其"可见性"属性设置为隐藏的图形元素仍可能会接收事件。

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

相关文章：