2

<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);};"

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

  1. 加载 svg 文件的延迟导致尝试在尚不存在的 svg 文件上执行的代码出现问题。

  2. onclick 事件必须附加到 svg 元素。我不知道为什么，Tanzeels 的帖子显示了这一点，我的实验证实了这一点。

  3. 我试图编写 onclick="alert(333)" 的方式不起作用。以上就是。同样，我不知道为什么，但在这一点上，我很高兴顺其自然。

4

2 回答 2

3

您需要将点击处理程序分配给 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事件处理程序时会抛出错误。

于 2012-12-07T05:57:50.780 回答
0

尝试将嵌入标签包装在 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>
于 2012-12-07T04:33:29.110 回答