Question

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

我已经尝试过Firefox 17和Chrome 23，而其他一些方法，例如getElementsByTagNameNS，到目前为止还没有运气。

感谢您提供任何帮助。

以下是我正在使用的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>

Answer 1

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

无法将事件添加到内联SVG元素

1 个答案: