4

我正在尝试访问 JavaScript 中的内联 SVG 元素，以添加单击事件。我遇到了将事件添加到除以 id 标识的单个元素之外的任何内容的问题。使用 document.getElementById("p1_1_1") 会起作用，但我需要操作 200 个矩形，所以我需要使用 document.getElementsByTagName 或 document.getElementsByClassName - 两者都返回有意义的 HTMLCollections，但 addEvent 不会添加事件。

到目前为止，我已经尝试过 Firefox 17 和 Chrome 23，以及一些其他方法，例如getElementsByTagNameNS, bu no lucky。

感谢您提供的任何帮助。

以下是我正在使用的 JS 代码和 HTML/SVG 的精简版本：

JavaScript：

 function testing() {
    var testDiv = document.getElementById("tester");
    testDiv.innerHTML = '<h1>Success!</h1><br>';
}

function addEvent(obj, evt, func) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, func, false)
    } else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, func);
    } else {
        alert("no success adding event");
    }
}

function init() {
    var targetSquares = document.getElementsByTagName("rect");
    addEvent(targetSquares, "click", testing);
}

window.addEvent(window, "load", init);

内联 SVG

<!DOCTYPE html>
<html lang="en-GB">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="bsroyale.js"></script>
    </head>
    <body>
<div id="tester">
</div>
        <div id="gamemap">
              <svg xmlns="http://www.w3.org/2000/svg"
                   xmlns:xlink="http://www.w3.org/1999/xlink"
                   viewBox="0 0 600 600">
                <rect x="50" y="50" width="20" height="20" class="p1" id="p1_1_1" />
                <rect x="71" y="50" width="20" height="20" class="p1" id="p1_2_1" />
                <rect x="92" y="50" width="20" height="20" class="p1" id="p1_3_1" />
                <rect x="113" y="50" width="20" height="20" class="p1" id="p1_4_1" />
                <rect x="134" y="50" width="20" height="20" class="p1" id="p1_5_1" />
                <!-- etc etc, 200 rect in total-->
            </svg>
        </div>
    </body>
</html>
4

1 回答 1

2

document.getElementsByTagName("rect")返回一个 HTML 集合。然后，您必须遍历该集合（即，对于每个...）并将事件侦听器添加到每个集合项。

我没有对其进行测试，但您的 init 函数可能如下所示：

function init() {
    var targetSquares = document.getElementsByTagName("rect");
    for (var i = 0; i < targetSquares.length; i++) {
        addEvent(targetSquares[i], "click", testing);
    }
}
于 2012-12-30T03:28:58.857 回答