事件侦听器未被删除

Question

此代码在加载 DOM 内容时注册滚动事件侦听器。当组件被卸载时，我正在调用 removeEventListener() 方法，但事件侦听器没有被删除，而是在其他组件中被调用。我哪里错了？谢谢！

useEffect(() => {
  return () => {
    document.removeEventListener('scroll', listener, true);
    console.log('unmount');
  };
}, []);

useLayoutEffect(() => {
  document.addEventListener('DOMContentLoaded', (event) => {
    document.addEventListener('scroll', listener, true);
  });
});

const listener = () => {
  let elementTop = $('.foo').offset().top;
  let elementBottom = elementTop + $('.foo').outerHeight();
  let viewportTop = $(window).scrollTop();
  let viewportBottom = viewportTop + $(window).height();
  let boolean = elementBottom > viewportTop && elementTop < viewportBottom;
  boolean ? setMapAbsolute(true) : setMapAbsolute(false);
};

Answer 1

由于添加事件处理程序不会改变屏幕上呈现的内容，我建议将其添加到您的 useEffect() 而不是 useLayoutEffect() 中。您已经将一个空数组作为依赖项列表传递给 useEffect，这将确保只添加一次事件处理程序。

useEffect(() => {
  document.addEventListener('DOMContentLoaded', (event) => {
    document.addEventListener('scroll', listener, true);
  });
  return () => {
    document.removeEventListener('scroll', listener, true);
    console.log('unmount');
  };
}, []);

Answer 2

您在依赖项中遗漏了一个空数组，因此侦听器会在每次重新渲染时重新附加。

useLayoutEffect(() => {
 document.addEventListener('DOMContentLoaded', (event) => {
 document.addEventListener('scroll', listener, true);
 });
},[]);

事件侦听器未被删除

Event listener is not getting removed

javascript

jquery

event-listener

reactjs