Question

在下面的代码中，似乎我只对最后添加的框（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>

Answer 1

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

Answer 2

解释为什么Lior的代码有效而你的代码没有：

document.body.innerHTML +=

永远是个错误。它将您的文档对象转换为HTML字符串，向该字符串添加一些文本，然后重新解析整个HTML以生成替换所有旧文档的新文档对象。

在最好的情况下，这会起作用，但速度有点慢。然而，更糟糕的副作用是任何未串行化为HTML的信息都将完全丢失。这包括表单字段值，JavaScript属性和引用以及事件侦听器。因此，每次构造color_toggle_box时，都会破坏之前有听众的所有对象;因此，听众永远不会被召唤。

addEventListener仅适用于最后一个对象

2 个答案: