Невозможно удалить EventListener - PullRequest
Новая
       85

Невозможно удалить EventListener

0 голосов
/ 18 мая 2018

У меня есть класс 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 не удаляется и регистрация позиции продолжается.

Я думаю, что сделалобратите внимание, чтобы не регистрировать анонимные функции, которые могут быть причиной такой проблемы.Поэтому мне интересно, что еще может быть причиной такого поведения.

1 Ответ

0 голосов
/ 21 мая 2018

.bind создает функцию new .Так что ваше добавление и удаление не для той же функции.

Исправить

Не использовать .bind и вместо этого использовать функции стрелок: 

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