javascript - 如何删除类中的事件监听器？

Question

我已经尝试了以下两个版本，但无法删除 mousemove eventListener。我认为我对类内部范围的有限理解导致了一些困惑，但我认为这应该可行。

export class Line extends Graphic {
  constructor() {
    super()
  }

  handleMouseMoveWhileDrawing(e) {
    console.log(e);
  }

  stopDrawing() {
    document.removeEventListener('mouseup', this.stopDrawing)
    document.removeEventListener('mousemove', this.handleMouseMoveWhileDrawing)
  }

  startDrawing() {
    document.addEventListener('mousemove', this.handleMouseMoveWhileDrawing)
    document.addEventListener('mouseup', this.stopDrawing)
  }
}

new Line().startDrawing()

export class Line extends Graphic {
  constructor() {
    super()
    this.handleMouseMoveWhileDrawing = function(e) {
      console.log(e);
    }
  }

  stopDrawing() {
    document.removeEventListener('mouseup', this.stopDrawing)
    document.removeEventListener('mousemove', this.handleMouseMoveWhileDrawing)
  }

  startDrawing() {
    document.addEventListener('mousemove', this.handleMouseMoveWhileDrawing)
    document.addEventListener('mouseup', this.stopDrawing)
  }
}

new Line().startDrawing()

任何帮助将不胜感激。

Answer 1

@epascarello 将我推向了正确的方向。

将回调传递给事件监听器时，this 参数会自动设置为事件监听器附加到的 DOM 元素。因此，stopDrawing 方法中的 this.handleMouseMoveWhileDrawing 返回了 undefined。

我可以通过使用 .bind() 覆盖 stopDrawing 方法中的 this 来解决这个问题:

document.addEventListener('mouseup', this.stopDrawing.bind(this))