javascript - 包裹的可点击 DivElement : event isn't listened

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

我正在尝试添加带有 move(); 作为值的 HTML 属性“onclick”。这个 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);
    };
}