javascript - Firefox 的foreignObject 中未触发事件

Question

尝试使用 svg 的foreignObject 创建一个复杂的菜单系统时，我发现了 Firefox 中的一个错误。当我的子菜单项超出了foreignObject 的容器大小时，我的mouseleave 事件 被触发。我做了一个更简单的例子来展示使用鼠标单击事件的问题。

在 Chrome 中浏览时没有问题，但在 Firefox(既不是最新版也不是测试版)中我无法触发它。有没有人以前见过这个问题，并且知道如何解决它？

jsFiddle here

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 中的一个错误，因此我将其标记为已解决