Firefox的foreignObject中未觸發事件

Question

嘗試使用svg的foreignObject創建精心設計的菜單系統時，我遇到了Firefox中似乎有錯誤的地方。 當我的子菜單項超出我的externalObject的容器大小時，將觸發mouseleave事件 。 我做了一個簡單的示例，以使用鼠標單擊事件來顯示問題。

在Chrome瀏覽器中瀏覽時沒有問題，但是在Firefox（既不是最新版也不是Beta版）中，我無法觸發它。 有沒有人曾經見過這個問題，並且對如何解決這個問題有任何線索？

jsFiddle在這里

HTML

<svg>
    <foreignObject width="100px" height="100px" style="overflow:visible">
        <div top=0px id="target" onclick='javascript:alert("hi");'></div>
        <div top=0px id="foborder" onclick='javascript:alert("hi");'></div>
    </foreignObject>
</svg>

CSS

svg #target {
    height: 300px;
    width: 300px;
    background: #dd0;
    position:absolute;
}
svg #foborder {
    height: 100px;
    width: 100px;
    border: 1px solid red;
    position:absolute;
}

Answer 1

這是Firefox中的錯誤，因此我將其標記為已解決