removeEventListener似乎不起作用？

Question

由于某些原因，在滚动页面结束时，我需要延迟单击和preventDefault一段时间。所以我写了这样的内容：

// 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

我的问题是，当我将disableClickDuringScrollHandler放在scrollHandler之外时，removeEventListener可以很好地工作，但是当我将disableClickDuringScrollHandler放在scrollHandler内时，removeEventListener似乎不起作用。

我已经尝试了很多次才能找到原因，但是失败了。所以我来这里寻求您的帮助。

Answer 1

问题在于，每次用户滚动时，您都会创建一个新的disableClicksDuringScroll闭包并将其添加为单击侦听器。 运行此计时器时，它将删除最新的Click侦听器，但不会删除以前的Click侦听器（因为它们是不同的闭包，因此它们不等于您这次要删除的函数）。

您应该在scroll处理程序之外只定义一次disableClicksDuringScroll函数，因为此处未引用任何局部变量。 然后，当您调用removeEventListener ，它将找到此处理程序。

您也可以使用一个变量，这样在滚动开始时才添加一次Click侦听器，而不是每次重置计时器时都添加一次。

 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);