Как удалить eventListener внутри класса?

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 подтолкнул меня в правильном направлении.

При передаче обратного вызова в eventListener параметр this автоматически устанавливается на элемент DOM, к которому присоединен eventListener.Поэтому this.handleMouseMoveWhileDrawing внутри метода stopDrawing вернул undefined.

. Мне удалось обойти это, используя .bind() для переопределения this в методе stopDrawing:

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