Question

<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的帖子显示了这个＆amp;我的实验证实了这一点。
我试图编写onclick =“alert（333）”的方式无效。以上呢。我不知道为什么，但在这一点上我很高兴顺其自然。

Answer 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资源，因为在分配permission denied事件处理程序时，浏览器会抛出onclick错误。

Answer 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>

如何使用onclick处理嵌入式SVG图像

2 个答案: