Javascript 包装的可点击DivElement：事件不为'；我不听 请考虑下面的代码： 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元素时，它会发出“Clicked！”警报

但它不起作用。当我检查源代码时，似乎没有将属性

onclick

添加到此HTML元素中

---

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

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

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

只需使用
.appendChild（）
添加元素节点即可：

document.body.appendChild(this.html_element)

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

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

非常感谢。您知道为什么我无法访问函数
移动
中的
样式
属性吗=/@Lern-X:
this.style
应该为您提供该属性，因此例如
this.style.display=“none”
将隐藏元素。哦，您是指您的显示函数。这是因为
this
的值将是元素，而不是对象。这是一个常见的问题，如果您搜索，您会发现许多不同的解决方案。我喜欢的一种方法是使用
EventListener
接口。但是还有其他的方法。点击
onclick
改变
移动的上下文否？（编辑：因此它会更改
this
？）的值@Lern-X：在JS中，
this
的值在调用的站点确定。它很像一个不可变的函数参数，在每次调用中都按词汇定义。JS现在有一个“箭头函数”，它不定义
这个
值，因此它从外部作用域关闭
这个
，让您使用该值。。