Mousemove函数没有被调用

Question

我有一个es6类，绑定在mousedown上的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`; 
    } 
}