[英]Event listener is not getting removed
此代码在加载 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);
};
由于添加事件处理程序不会更改屏幕上呈现的内容,因此我建议将其添加到您的useEffect()
而不是useLayoutEffect()
中。 您已经将一个空数组作为依赖项列表传递给 useEffect,这将确保事件处理程序只添加一次。
useEffect(() => {
document.addEventListener('DOMContentLoaded', (event) => {
document.addEventListener('scroll', listener, true);
});
return () => {
document.removeEventListener('scroll', listener, true);
console.log('unmount');
};
}, []);
您在依赖项中错过了一个空数组,因此在每次重新渲染时都会重新附加侦听器。
useLayoutEffect(() => {
document.addEventListener('DOMContentLoaded', (event) => {
document.addEventListener('scroll', listener, true);
});
},[]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.