gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:19:40 25 4
gpt4 key购买 nike

我正在尝试访问 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>

最佳答案

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

关于javascript - 无法将事件添加到内联 SVG 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14088001/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com