无法移除 EventListener

Question

我有一个 TypeScript class 看起来像这样：

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

基本上，代码应该在鼠标锁定到 canvas 后注册 _handleMouseMovement 事件侦听器，并在解除锁定后将其删除。

锁定确实有效。它激活了 _handleMouseMovement 中的位置记录，但是一旦我通过 ESC 移除锁定，我确实收到消息 Unlocked mouse pointer from canvas. 所以 _handleMouseMovement 没有被删除并且位置记录继续。

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

Answer 1

.bind 创建一个 new 函数。所以你的增删改不是为了同一个功能。

修复

Don't use .bind 而不是使用箭头函数：

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

无法移除 EventListener

Unable to remove EventListener

typescript

pointerlock

修复