无法删除滚动侦听器

Question

登陆页面.js

我在安装时添加了滚动事件侦听器

componentDidMount() {
    window.addEventListener('scroll', this.scrollNavigation, true);
}

我在卸载之前将其删除

componentWillUnmount() {
    window.removeEventListener('scroll', this.scrollNavigation);
    console.log("unmountedLandingPage")
  }

功能

scrollNavigation = () => {
        console.log("called")
        const doc = document.documentElement;
        const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
        if (top > 80) {
          document.getElementById('topnav').classList.add('nav-sticky');
        } else {
          document.getElementById('topnav').classList.remove('nav-sticky');
        }
      }

问题

当我转到另一页时，我看到打印了“unmontedLandingPage”。 但是，当我滚动到那里时，我仍然看到正在打印“已调用”。 为什么我的 removeEventListener 不起作用？

Answer 1

您必须将true传递给 removeEventListener 调用：

componentWillUnmount() {
    window.removeEventListener('scroll', this.scrollNavigation, true);
    console.log("unmountedLandingPage")
  }

从文档：

如果选项不同， addEventListener() 将允许您为相同类型多次添加相同的侦听器，但 removeEventListener() 检查的唯一选项是 capture/useCapture 标志。 它的值必须匹配 removeEventListener() 才能匹配，但其他值不匹配。

Answer 2

如果一个监听器注册了两次，一个有捕获，一个没有，分别删除每一个。 删除捕获侦听器不会影响同一侦听器的非捕获版本，反之亦然。

来源 - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

因此，在您的情况下，您正在注册一个捕获侦听器，但试图删除一个非捕获侦听器。 它不会工作。