未调用鼠标移动功能

Question

我有一个 es6 class，它在鼠标按下时绑定 handleElement，拖动时它会调整 variableElement 的大小。

问题是它不会输出 console.log('move')。尽管如果我重命名 _mousemove 函数，我会在两个 eventListeners 上收到未定义的方法错误...

我似乎无法弄清楚发生了什么？

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`;
  }
}

Answer 1

_mousemove 不会被调用，因为 this._mousemove 中的 this. 不引用 DragResizer（它引用 window）

旧方法（不使用箭头函数）是设置：

var _this = this;

然后调用

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

没有箭头功能：

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 我用箭头函数重写了上面的代码。这是一个 working fiddle 下面的代码稍作修改以显示它的工作。

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`;
  }
}

未调用鼠标移动功能

Mousemove function not being called

javascript

ecmascript-6

es6-class