Javascript 未调用Mousemove函数

我有一个es6类，它在mousedown上绑定一个

handleElement

，在拖动时它将调整

variableElement

的大小

问题是它不会输出

console.log（'move'）

。虽然如果我重命名

\u mousemove

函数，我会在两个EventListener上得到一个未定义的方法错误

我好像不知道发生了什么事

导出默认类DragResizer{
构造函数（handleElement、variableElement）{
this.handleElement=window.document.getElementsByClassName（handleElement）[0]；
this.variablelement=window.document.getElementsByClassName（variablelement）[0]；
console.log（'bind'）；
this.handleElement.addEventListener（'mousedown'，function（）{
window.addEventListener（'mousemove'，this.\u mousemove）；
console.log（'down'）；
});
window.addEventListener（'mouseup'，function（）{
console.log（'up'）；
window.removeEventListener（'mousemove'，this.\u mousemove）；
});
}
_mousemove（事件）{
console.log（'move'）；
this.variablelement.style.flexBasis=`${event.clientX}px`；
}
}
\u mousemove
将不会被调用，因为
中的
是此。
中的
。\u mousemove
不是指
DragResizer
（它指的是
窗口
）

旧方法（不使用箭头功能）是设置：

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

更新我使用箭头函数重写了上述内容。下面是一个代码稍微修改，以显示它的工作

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

\u mousemove
将不会被调用，因为
中的
this.
。\u mousemove
不指
DragResizer
（它指的是
窗口
）

旧方法（不使用箭头功能）是设置：

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

更新我使用箭头函数重写了上述内容。下面是一个代码稍微修改，以显示它的工作

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

尝试对mousedown侦听器使用箭头函数来保留上下文（即
此
）@Musa no luck。上下文似乎不是这里的问题。似乎没有调用mousemove。您不需要在类中引用
控制台
，因为
\u mousemove
是私有的吗？尝试使用箭头函数让mousedown侦听器保留上下文（即
此
）@Musa不走运。上下文似乎不是这里的问题。似乎没有调用mousemove..您不需要在类中引用
控制台
，因为
\u mousemove
是私有的吗？