How to remove an eventListener inside a class?

Question

I have tried both of the following versions but I can't get the mousemove eventListener to be removed. I think my limited understanding of scoping inside of classes is causing some confusion, but I'd assume this should work.

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()

Any help would be greatly appreciated.

[This may help](https://stackoverflow.com/a/33859264/1377002) — Andy, Sep 20 '19 at 14:42

score 1 · Accepted Answer · answered Sep 23 '19 at 11:36

@epascarello pushed me in the right direction.

When passing a callback to an eventListener the this parameter is automatically set to the DOM element that the eventListener is attached to. Therefore this.handleMouseMoveWhileDrawing inside the stopDrawing method returned undefined.

I was able to work around this by using .bind() to override the this in the stopDrawing method:

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

How to remove an eventListener inside a class?

1 Answers1