javascript - SVG 元素在 Opera 和 IE 中不接收事件

标签 javascript html internet-explorer svg opera

我有一个网页,其中 IMG 元素上方有 SVG,应该在其上绘制形状。

绘图在浏览器中正确执行。但是当涉及到接收事件时,IMG 实际上似乎是阻止事件/接收它(它本身没有附加任何事件,所以它没有被显式停止)。

例子:
http://jsfiddle.net/UvRVX/12/ (固定标记,添加圆圈) FF,Chrome:“svg received mousedown”(正确)
Opera、IE9:-无-(不正确)

当通过CSS visibility或display: none隐藏图片时,它开始起作用,但这种方式当然不能使用。

如何将 SVG 元素放在 IMG 元素之上,以便它可以接收事件? (在 Opera、IE9 中)
谢谢

最佳答案

有两个原因导致这不起作用:

1. svg 是空的。
即使你给了它一个高度和宽度,我相信有些浏览器不会给它分配一个真实的大小,直到你给它添加一个形状。您可以通过在此处放置一个空矩形来解决此问题:

<rect x="0" y="0" width="300" height="300" stroke="black" stroke-width="0" fill="none"></rect>

2。因为 pointer-events属性(property)。您可以阅读更多 here .默认情况下,它的值为 visiblePainted ,所以我真的不知道为什么Chrome和FF允许事件通过。您需要将其设置为 "all"

还要小心 html,它的攻击很严重。

修复:

http://jsfiddle.net/mihaifm/ptLrB/2/

关于javascript - SVG 元素在 Opera 和 IE 中不接收事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10086341/

相关文章:

javascript - addEventListener 不会在 IE 中点击时触发

javascript - 如何将节点列表中的 HREF 属性分配给常规数组?

javascript - 构建大型 jQuery Mobile Web 应用程序 : use iFrames as pages? Backbone、Spine、Underscore 和其他框架?

javascript - 为什么 Chrome 忽略 onClick 操作?

html - Rails - 使用 Active Storage 在新选项卡中打开图像

javascript - Paypal Express Checkout 窗口不断加载

html - CSS IE 兼容性问题

javascript - 从异步请求循环中获取值

javascript - 如何在获取请求React Native中使用响应

html - 第一个 div 位于我的导航栏中?