此代码在加载 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');
};
}, []);
关于javascript - 事件监听器没有被删除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62004387/