文档未捕获嵌入式文档上引发的事件答案

【问题标题】：Document not catching events raised on embedded document文档未捕获嵌入式文档上引发的事件
【发布时间】：2011-05-31 12:03:57
【问题描述】：

我有一个 HTML，其中包含一个带有对象标记的嵌入式 SVG。我在全局文档上为 mousemove 注册了事件侦听器，但是当鼠标移动发生在嵌入的 SVG 文档内的元素上时，不会调用在全局文档上为 mousemove 注册的回调。似乎嵌入是这里的问题，但无法弄清楚问题可能是什么，我认为 SVG 文档是全局文档的子文档，全局文档应该获取所有事件。有人可以帮忙吗？全局文档和SVG文档没有关系吗？

【问题讨论】：

可以使用<object>:<object data="http://upload.wikimedia.org/wikipedia/commons/c/c7/SVG.svg" type="image/svg+xml" width="400" height="300" onmousemove="console.log('test');"></object> 嵌入任何 SVG 来演示该问题。可能是火狐的问题，我在IE里没试过。

标签： html event-handling svg

【解决方案1】：

我尝试了以下方法：

<div style="position:relative; background-color:red; height:300px">
    <object data="http://upload.wikimedia.org/wikipedia/commons/c/c7/SVG.svg" type="image/svg+xml" height="300" width="400" style="position:absolute;z-index:1;" 
        onclick="console.log('clickSVG');" 
        onmousemove="console.log('moveSVG');"
        ></object>
    <div style="height:150px; background-color:blue; z-index:2;"
        onclick="console.log('clickDIV');" 
        onmousemove="console.log('moveDIV');"></div>
</div>

考虑到分层在对象上方的 div 可能会捕获事件，但事实并非如此。我真的不知道为什么；完全在 JS 中创建 SVG 对象并直接附加处理程序可能值得一试。

编辑：很抱歉挖掘了旧帖子，我意识到有点晚了；我希望这仍然可以帮助任何人。

【讨论】：