Почему происходит событие щелчка, даже если оно удалено?

Question

в моем приложении я добавляю прослушиватель кликов через функцию activListener (). В какой-то момент во время выполнения я удаляю прослушиватель щелчков с помощью функции deactivatelistener (). Но все же , когда пользователь щелкает , функция щелчка pingIfLastPingIsOld () вызывается снова . Функция activListener () больше не вызывается после deactivatelistener ().

Есть ли у какого-то тела клей, как получается? Почему прослушиватель кликов все еще работает?

Frank

    activateListener() {
        window.addEventListener('click', () => {
            this.pingIfLastPingIsOld();
        });
    }

    deactivatelistener() {
        window.removeEventListener('click', this.pingIfLastPingIsOld);
    }

Answer 1

Существующий ответ Cétia правильно определяет проблему - вы регистрируете обработчик щелчков с помощью анонимной функции, но затем пытаетесь отменить регистрацию именованной функции - однако я хотел бы предоставить альтернативное решение.

---

Я вижу, что вы используете анонимную функцию в качестве прослушивателя кликов, я предполагаю, что это исправляет контекст this для выполнения pingIfLastPingIsOld. Это также можно сделать с помощью метода .bind.

constructor() {
    this.pingIfLastPingIsOld = this.pingIfLastPingIsOld.bind(this);
}

activateListener() {
    window.addEventListener('click', this.pingIfLastPingIsOld);
}

deactivatelistener() {
    window.removeEventListener('click', this.pingIfLastPingIsOld);
}

Независимо от того, откуда вызывается pingIfLastPingIsOld, теперь он будет выполняться с компонентом в качестве значения this.

---

Документация

Answer 2

Это нормально, потому что вы не зарегистрировали / не зарегистрировали точно такой же метод.Сделайте это:

activateListener() {
    window.addEventListener('click', this.pingIfLastPingIsOld);
}

deactivatelistener() {
    window.removeEventListener('click', this.pingIfLastPingIsOld);
}

Но угловой путь будет больше:

@HostListener('document:click', ['$event.target'])
public onClick(targetElement) {
    // your stuff
}