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似乎不起作用。

我已经尝试了很多次才发现原因，但失败了。所以我到这里来问你的帮助。

来源

2017-07-20 zhang olve

它看起来像你正试图阻止滚动过程中点击。你想用这个解决什么问题？ –

在移动网站上，当滚动页面时，如果有人触摸屏幕让滚动结束，有时会触发点击并重定向到另一个href位置。为避免此问题，我编写了一些类似的代码。@ Rajesh P https ：//stackoverflow.com/questions/44095681/how-to-avoid-direct-to-another-anchor-when-scroll-mobile-device-screen-and-touch –

问题是，每次用户滚动时，都会创建一个新的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);

来源

2017-07-20 00:52:01 Barmar

removeEventListener似乎不工作？

回答

相关问题