javascript - 如何在类内部删除eventListener？

我已经尝试了以下两个版本，但是无法删除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()

任何帮助将不胜感激。

最佳答案

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

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

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

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

关于javascript - 如何在类内部删除eventListener？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58030425/