为什么单击事件即使被删除也会触发？

Question

在我的应用中，我通过功能ActivateListener（）添加了一个点击监听器。 在运行时的某个时刻，我通过功能deactivatelistener（）删除了点击监听器。 但是当用户进行 click 时，仍然仍然会再次调用点击功能pingIfLastPingIsOld（）。 在deactivatelistener（）之后，不会再次调用函数activateListener（）。

有些身体有胶水怎么来？ 为什么点击监听器仍在工作？

坦率

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

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

Answer 1

这很正常，因为您没有注册/注销完全相同的方法。这样做：

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

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

但是，角度方式会更多：

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

Answer 2

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的值来执行。

---

Documentation