removeEventListener似乎不工作?
问题描述:
出于某种原因,我需要end.So我写这样的事情耽误点击的preventDefault了一段时间,当滚动页面:removeEventListener似乎不工作?
// const disableClickDuringScrollHandler=(e)=> {
// e.preventDefault();
// };
this.scrollHandler = e => {
console.log('scrolling');
const disableClickDuringScrollHandler = (e) => {
e.preventDefault();
};
document.addEventListener('click', disableClickDuringScrollHandler);
window.clearTimeout(this.scrollTimer);
this.scrollTimer = window.setTimeout(() => {
console.log('scroll end');
document.removeEventListener('click', disableClickDuringScrollHandler);
}, 300);
}
window.addEventListener('scroll', this.scrollHandler);
我还一直写codepen:https://codepen.io/zhangolve/pen/gRNMoX
我的问题当我在scrollHandler之外放置disableClickDuringScrollHandler时,removeEventListener可以很好地工作,但是当我在scrollHandler里面放置disableClickDuringScrollHandler时,removeEventListener似乎不起作用。
我已经尝试了很多次才发现原因,但失败了。所以我到这里来问你的帮助。
答
问题是,每次用户滚动时,都会创建一个新的disableClicksDuringScroll
闭包并将其添加为点击侦听器。当这个定时器运行时,它会删除最新的点击监听器,但不是以前的监听器(因为它们是不同的闭包,所以它们不等于你这次删除的函数)。
您应该在scroll
处理程序之外定义disableClicksDuringScroll
函数一次,因为它在此处不引用任何局部变量。然后当你打电话给removeEventListener
它会发现这个处理程序。
您还可以使用变量,因此您只在滚动开始时添加一次点击侦听器,而不是每次重置计时器。
this.disableClickDuringScrollHandler = (e) => {
e.preventDefault();
};
this.inScroll = false;
this.scrollHandler = e => {
console.log('scrolling');
if (!this.inScroll) {
document.addEventListener('click', this.disableClickDuringScrollHandler);
this.inScroll = true;
}
window.clearTimeout(this.scrollTimer);
this.scrollTimer = window.setTimeout(() => {
this.inScroll = false;
console.log('scroll end');
document.removeEventListener('click', disableClickDuringScrollHandler);
}, 300);
}
window.addEventListener('scroll', this.scrollHandler);
它看起来像你正试图阻止滚动过程中点击。你想用这个解决什么问题? –
在移动网站上,当滚动页面时,如果有人触摸屏幕让滚动结束,有时会触发点击并重定向到另一个href位置。为避免此问题,我编写了一些类似的代码。@ Rajesh P https ://*.com/questions/44095681/how-to-avoid-direct-to-another-anchor-when-scroll-mobile-device-screen-and-touch –