Question

请考虑以下几点代码：

function Movable(x, y, width, height, background_color) {
    this.html_element = document.createElement("div");

    this.html_element.onclick = this.move;
    this.move = function() {
        alert("Clicked !");
    };

    this.display = function() {
        document.body.innerHTML += this.html_element.outerHTML;
    };
}

我试图添加HTML属性＆＃34; onclick＆＃34;用＆＃34; move（）;＆＃34;作为价值。这个move值实际上是一个警告＆＃34; Clicked！＆＃34;当最终用户点击此HTML元素时。

但它不起作用。当我检查源代码时，似乎不会将属性onclick添加到此HTML元素中。

你知道为什么以及如何解决这个问题吗？

Answer 1

document.body.innerHTML += this.html_element.outerHTML;是问题所在。这只是向网页添加元素的最糟糕方式。

您的处理程序与HTML无关，因此当您使用outerHTML调用将元素序列化为HTML时，它会丢失。更不用说您在document.body下序列化并销毁所有节点，然后将它们重新转换为新节点，这将使它们失去处理程序和其他数据。

相反，只需使用.appendChild()添加Element节点：

document.body.appendChild(this.html_element)

此外，您在创建之前将this.move指定为处理程序，除非有undefined，否则只会指定Movable.prototype.move用处理程序。

function Movable(x, y, width, height, background_color) { this.html_element = document.createElement("div"); this.move = function() { alert("Clicked !"); }; this.html_element.onclick = this.move; this.display = function() { document.body.appendChild(this.html_element); }; }

包含可点击的DivElement：事件未被收听

1 个答案: