如何让 onclick 处理嵌入式 SVG 图像答案

【问题标题】：How to get onclick working on emdedded SVG images如何让 onclick 处理嵌入式 SVG 图像
【发布时间】：2012-11-25 05:44:27
【问题描述】：

<embed id="bottom" src="img/model/skirt.svg" onclick="control.colorClothes(this)" title="bottom" type="image/svg+xml" width="325" height="500"> </embed>

我想在鼠标点击时触发一个事件。
如果我使用 onload 和 onmouseover，而不是 onclick 或 onmouseup/down，则上述方法有效。

有什么想法吗？

** 编辑 **

感谢海报。我要找的代码是
onload="this.getSVGDocument().onclick = function(event){alert(333);};"

它克服了三个不同的问题。

加载 svg 文件的延迟导致代码尝试在尚不存在的 svg 文件上执行时出现问题。
onclick 事件必须附加到 svg 元素。我不知道为什么，Tanzeels 的帖子显示了这一点，我的实验证实了这一点。
我尝试编写 onclick="alert(333)" 的方式不起作用。以上就是。同样，我不知道为什么，但在这一点上，我很乐意顺其自然。

【问题讨论】：

您是否尝试过类似：onclick="javascript:control.colorClothes(this)"
不，只是试一试。它没有效果。 Ta 的建议。
您可能不想这样做，但尝试使用 jQuery 附加事件，看看是否有帮助
这可能会有所帮助：stackoverflow.com/questions/9945265/… 看起来嵌入 svg 时，您不能在嵌入本身上调用 onclick，您必须采取变通方法。
我尝试过使用 jquery，但那不起作用，我查看了您指向的线程。令我震惊的是，他们解决的问题比我的要困难得多，这意味着有很多噪音而且我还没有达到那个水平。令人沮丧的是，从我在其他地方读到的内容，embed 应该能够处理事件并且它确实处理至少两个，但它似乎不是鼠标点击事件。

标签： javascript html javascript-events

【解决方案1】：

您需要将点击处理程序分配给 SVG。在以下几行做一些事情：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function getClick(event) {
            var clickedElement = event.target;
            alert(clickedElement);
            //console.log(clickedElement);
            return;
        }

        function addClick() {
            var embedObj = document.getElementById("bottom");
            embedObj.getSVGDocument().onclick = function (event) {
                return getClick(event);
            };
            return;
        }
    </script>
</head>
<body onload="addClick();">
    <embed id="bottom" src="img/model/skirt.svg" title="bottom" type="image/svg+xml"
        width="628" height="709"></embed>
</body>
</html>

event.target 将返回被点击的 SVG 节点。

请注意，此方法不适用于跨域 SVG 资源，因为浏览器在分配 onclick 事件处理程序时会抛出 permission denied 错误。

【讨论】：

感谢以上，它让我意识到我有三个问题。我将在上面的帖子的编辑中详细说明它们，但答案是 onload="this.getSVGDocument().onclick = function(event){alert(333);};" 非常感谢。

【解决方案2】：

尝试将 embed 标记包装在 div 中并将 onclick 处理程序放在上面可能是值得的。我不确定点击事件是否会从 svgs 冒泡到正常的 DOM 中，但如果是这样，那么你应该没问题。像这样：

<div onclick="control.colorClothes(this)"><embed id="bottom" src="img/model/skirt.svg" onclick="control.colorClothes(this)" title="bottom" type="image/svg+xml" width="325" height="500"></embed></div>

【讨论】：

还请注意，如果您调用 control.colorClothes(this)，那么该函数将不会作为“控制”对象的方法调用，而只会作为独立函数调用。如果要引用控件对象的其他成员，则需要以其他方式绑定它或将 onclick 处理程序包装在一个函数中，或使用 jquery 之类的库将处理程序绑定到方法。
这似乎与使用 svg 有关，但又为什么 onmouseover 有效，但 onmousedown 或 onclick 无效。我已经尝试使用 div 标签和一个新的独立测试函数（即：不是对象方法），仍然无法正常工作。