Mousemove函數沒有被調用

我有一個es6類，綁定在mousedown上的handleElement，拖動它將調整variableElement的大小。Mousemove函數沒有被調用

問題是它不會輸出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`; 
    } 
}

來源

2017-01-01 mark

嘗試使用箭頭函數爲mousedown偵聽器保留上下文（即'this'） – Musa

@Musa沒有運氣。上下文似乎不是這裏的問題。似乎沒有調用mousemove .. – mark

您是否需要在類中引用'console'，因爲_mousemove是私有的？ –

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

來源

2017-01-01 04:01:44 mseifert

Mousemove函數沒有被調用

回答

相關問題