4

クリック イベントを追加するために、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>
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 に答える