CODEWITHSUNDEEP
javascriptecmascript-6es6-class
mark
mark

Reputation: 873

Mousemove function not being called

I've got an es6 class, that binds a handleElement on mousedown, and on drag it will resize the variableElement.

The problem is it won't output the console.log('move'). Although if I rename the _mousemove function, I get an undefined method error on the two eventListeners...

I can't seem to figure out what's happening?

export default class DragResizer {
  constructor(handleElement, variableElement) {
    this.handleElement = window.document.getElementsByClassName(handleElement)[0];
    this.variableElement = window.document.getElementsByClassName(variableElement)[0];

    console.log('bind');
    this.handleElement.addEventListener('mousedown', function () {
      window.addEventListener('mousemove', this._mousemove);
      console.log('down');
    });

    window.addEventListener('mouseup', function () {
      console.log('up');
      window.removeEventListener('mousemove', this._mousemove);
    });
  }

  _mousemove(event) {
    console.log('move');
    this.variableElement.style.flexBasis = `${event.clientX}px`;
  }
}

Upvotes: 0

Views: 915

Answers (1)

mseifert
mseifert

Reputation: 5670

_mousemove won't get called since the this. in this._mousemove does not refer to DragResizer (it refers to window)

The old way (without using an arrow function) is to set:

var _this = this;

and then call 

window.addEventListener('mousemove', _this._mousemove);

Without arrow function:

export default class DragResizer {
  constructor(handleElement, variableElement) {
    this.handleElement = window.document.getElementsByClassName(handleElement)[0];
    this.variableElement = window.document.getElementsByClassName(variableElement)[0];

    console.log('bind');

    var _this = this;
    this.handleElement.addEventListener('mousedown', function () {
      window.addEventListener('mousemove', _this._mousemove);
      console.log('down');
    });

    window.addEventListener('mouseup', function () {
      console.log('up');
      window.removeEventListener('mousemove', _this._mousemove);
    });
  }

  _mousemove(event) {
    console.log('move');
    this.variableElement.style.flexBasis = `${event.clientX}px`;
  }
}

UPDATE I've rewritten the above using arrow functions. Here is a working fiddle with below code slightly modified to show it working.

export default class DragResizer {
  constructor(handleElement, variableElement) {
    this.handleElement = window.document.getElementsByClassName(handleElement)[0];
    this.variableElement = window.document.getElementsByClassName(variableElement)[0];

    console.log('bind');

    var _this = this;
    this.handleElement.addEventListener('mousedown', () => {
      window.addEventListener('mousemove', this._mousemove);
      console.log('down');
    });

    window.addEventListener('mouseup', () => {
      console.log('up');
      window.removeEventListener('mousemove', this._mousemove);
    });
  }

  _mousemove(event) {
    console.log('move');
    this.variableElement.style.flexBasis = `${event.clientX}px`;
  }
}

Upvotes: 3

Related Questions