无法删除EventListener

Question

我有一个TypeScript类,看起来像这样:

class MyClass {

    let canvas: any;

    constructor(canvas: any) {

        this.canvas = canvas;

        this.canvas.requestPointerLock = this.canvas.requestPointerLock;
        document.exitPointerLock = document.exitPointerLock;

        this.canvas.onclick = this._mouseClickHandler.bind(this);
        document.addEventListener('pointerlockchange', this._togglePointerLock.bind(this), false);
    }

    private _mouseClickHandler(event: MouseEvent): void {
        this.canvas.requestPointerLock();
    }

    private _togglePointerLock() {
        if (document.pointerLockElement === this.canvas) {
            console.info('Locked mouse pointer to canvas.');
            document.addEventListener('mousemove', this._handleMouseMovement.bind(this), false);
        } else {
            console.info('Unlocked mouse pointer from canvas.');
            // THIS DOES NOT WORK
            document.removeEventListener('mousemove', this._handleMouseMovement.bind(this), false);
        }
    }

    private _handleMouseMovement(event: MouseEvent) {
        console.log('Mouse moved to: ', event.movementX, event.movementY);
    }
}

基本上,代码应该_handleMouseMovement在鼠标被锁定到画布后注册事件监听器,并在锁定被移除后将其删除.

锁定确实有效.它会激活登录位置_handleMouseMovement但是一旦我通过我取消锁定,ESC我就会收到消息Unlocked mouse pointer from canvas.所以_handleMouseMovement不会删除并继续进行位置记录.

我认为我确实注意不注册匿名函数,这可能是导致这样的问题的原因.所以我想知道还有什么可能导致这种行为.

Answer 1

.bind创建一个新功能.因此,您的添加和删除不适用于相同的功能.

固定

不要使用.bind而是使用箭头功能:

private _handleMouseMovement = (event: MouseEvent) => {
    console.log('Mouse moved to: ', event.movementX, event.movementY);
}