在下面的代码中,似乎我只对最后添加的框(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>
答案 0 :(得分:2)
function color_toggle_box(boxid, color, width, height, xpos, ypos)
{
this.boxid = boxid;
this.boxdiv = document.createElement('DIV');
this.boxdiv.id = boxid;
this.boxdiv.style.position = 'absolute';
this.boxdiv.style.left = xpos + "px";
this.boxdiv.style.top = ypos + "px";
this.boxdiv.style.width = width + "px";
this.boxdiv.style.height = height + "px";
this.boxdiv.style.backgroundColor = color;
document.body.appendChild(this.boxdiv);
this.boxdiv.addEventListener('click', otherboxclick, true);
}
答案 1 :(得分:2)
解释为什么Lior的代码有效而你的代码没有:
document.body.innerHTML +=
永远是个错误。它将您的文档对象转换为HTML字符串,向该字符串添加一些文本,然后重新解析整个HTML以生成替换所有旧文档的新文档对象。
在最好的情况下,这会起作用,但速度有点慢。然而,更糟糕的副作用是任何未串行化为HTML的信息都将完全丢失。这包括表单字段值,JavaScript属性和引用以及事件侦听器。因此,每次构造color_toggle_box时,都会破坏之前有听众的所有对象;因此,听众永远不会被召唤。