0

I'm trying to remove event listeners inside my LocalActor class like this:

class LocalActor {
..


         this._whiteboards = document.getElementsByClassName("whiteboards")[0];
         this.setupListeners();

  }

Later in setupListeners, I have this:

setupListeners() {
    this._whiteboards.addEventListener('mousedown', e => this.mouseDown(e), false);
    this._whiteboards.addEventListener('mouseup', e => this.mouseUp(e), false);
    this._whiteboards.addEventListener('mouseout', e => this.mouseUp(e), false);
    this._whiteboards.addEventListener('mousemove', e => this.mouseMove(e), false);

//Touch support for mobile devices
    this._whiteboards.addEventListener('touchstart', e => this.mouseDown(e), false);
    this._whiteboards.addEventListener('touchend', e => this.mouseUp(e), false);
    this._whiteboards.addEventListener('touchcancel', e => this.mouseUp(e), false);
    this._whiteboards.addEventListener('touchmove', e => this.mouseMove(e), false);

}

The issue I have been having is that later I want to remove the event listeners, but they are not really removed...

  removeDraw()//remove all listeners for draw. Ensure to add events when ready again
  {
        this._whiteboards.removeEventListener('touchstart', e => this.mouseDown(e), false);
        this._whiteboards.removeEventListener('touchend', e => this.mouseUp(e), false);
        this._whiteboards.removeEventListener('touchcancel', e => this.mouseUp(e), false);
        this._whiteboards.removeEventListener('touchmove', e => this.mouseMove(e), false);

        this._whiteboards.removeEventListener('mousedown', e => this.mouseDown(e), false);
        this._whiteboards.removeEventListener('mouseup', e => this.mouseUp(e), false);
        this._whiteboards.removeEventListener('mouseout', e => this.mouseUp(e), false);
        this._whiteboards.removeEventListener('mousemove', e => this.mouseMove(e), false);
  }

I read that when I create the event listener, it isn't actually bound to a function. I'm just not sure if I want to create a function for every listener, and then reference every function later. I have read and found 1 post on stack overflow that addresses seting these up in classes, but it was more just removing one function. I'm trying to see how I might be able to remove all of these efficiently. Thanks for any ideas.

rickster26ter1
  • 373
  • 3
  • 10
  • Refer this link https://stackoverflow.com/questions/33859113/javascript-removeeventlistener-not-working-inside-a-class – chandan_kr_jha Apr 28 '20 at 04:55
  • I did. This is the one I found that I was referring to. I don't want to add or remove a listener of a 8 separate functions. It's different. – rickster26ter1 Apr 29 '20 at 01:50

0 Answers0