javascript将事件添加到对象类答案

【问题标题】：javascript add event to object classjavascript将事件添加到对象类
【发布时间】：2020-11-12 09:27:48
【问题描述】：

我想将事件处理程序添加到对象的类（使用 JQUERY），但我找不到我的问题的解决方案。我有这样的代码：

class Obstacle
{
    constructor()
    {
        this.points = [];
    }
}

class Editor
{
    constructor()
    {
        this.obstacle = new Obstacle;
    }

    addPoint()
    {
        this.obstacle.points.push(canvas.click( function(e) { return [e.clientX, e.clientY]; }));  
        alert(this.obstacle.points.length);
    }
}

当然没有任何结果，所以我寻求任何帮助:)。

【问题讨论】：

事件处理程序的返回值永远不会在任何地方收到，因为您传递给click方法的函数，作为参数，是从事件队列（或在这种特殊情况下，在 jQuery 内部）。推送到数组的是.click 调用的返回值，并且只执行一次，当您调用addPoint() 时。您必须将坐标推送到事件处理函数内的数组。
还有，应该怎么做？其实我认为这是我的第一个想法，我试图做到这一点：canvas.click(function(e) { this.obstacle.points.push([e.clientX, e.clientY])})，但是发生了未定义推送方法的错误

标签： javascript jquery class object events

【解决方案1】：

您必须在事件处理程序中推送坐标。在当前代码中，事件的返回值没有接收者。

因为单击处理程序中的this 指的是附加事件的元素，所以您需要单独引用this。一种简单的方法是将this 值存储到外部范围内的变量中，并使用它来引用实际对象。像这样：

addPoint() {
  const that = this;
  canvas.click(function(e) {
    that.obstacle.points.push([e.clientX, e.clientY]);
  });
}

【讨论】：