包装的可点击 DivElement：事件未被监听

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 属性“onclick”，并将 move(); 作为值。这个 move 值实际上是一个提醒“已点击！”的函数。当最终用户点击此 HTML 元素时。

但是没用。当我检查源代码时，似乎属性 onclick 没有添加到这个 HTML 元素中。

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

Answer 1

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

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

而是使用 .appendChild() 添加元素节点：

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：事件未被监听

Wrapped clickable DivElement : event isn't listened

javascript

wrapper

dom-events