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 。