在下面的代码中，似乎我只收到了最后一个添加的框(b1)的“otherboxclick”调用。如果我更改添加框的顺序，它总是最后一个有效。
我怎样才能让它适用于所有的盒子？
<html>
<head>
</head>
<body>
<script type="text/javascript">
function otherboxclick(e){
alert("other clicked");
}
function color_toggle_box(boxid, color, width, height, xpos, ypos)
{
this.boxid = boxid;
document.body.innerHTML +=
"<div id='" + boxid + "'; '; style='position:absolute;left:" + xpos + "px;top:" +
ypos +"px;width:" + width + "px;height:" + height +
"px;background:#000'></div>";
this.boxdiv = document.getElementById(boxid);
this.boxdiv.style.background = color;
this.boxdiv.addEventListener('click', otherboxclick, true);
}
var b2 = new color_toggle_box("223", "#ff0", 100, 100, 205, 100);
alert("b2 = " + b2.boxid);
var b3 = new color_toggle_box("323", "#0ff", 100, 100, 100, 205);
alert("b3 = " + b3.boxid);
var b1 = new color_toggle_box("123", "#0f0", 100, 100, 100, 100);
alert("b1 = " + b1.boxid);
</script>
</body>
</html>
最佳答案
解释为什么 Lior 的代码有效而你的无效:
document.body.innerHTML +=
总是一个错误。它将您的文档对象转换为 HTML 字符串，向该字符串添加一些文本，然后重新解析整个 HTML 以创建新的文档对象来替换所有旧的文档对象。
在最好的情况下，这会起作用，但速度有点慢。然而，更糟糕的副作用是任何未序列化为 HTML 的信息都将完全丢失。这包括表单字段值、JavaScript 属性和引用以及事件监听器。因此，每次构造 color_toggle_box 时，您都在破坏之前拥有监听器的所有对象；因此永远不会调用听众。
关于object - addEventListener 仅适用于最后一个对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1634346/