暂时删除事件侦听器，然后在某些操作后立即将其添加回来答案

【问题标题】：Temporarily remove event listener and then add it right back after certain actions暂时删除事件侦听器，然后在某些操作后立即将其添加回来
【发布时间】：2018-04-14 01:08:05
【问题描述】：

我有一个带有可滚动 div 的 react 应用程序。例如

<main id="main" onScroll={this.handleScroll}>

如何从 main 中临时移除 onScroll 事件监听器？然后在执行某些操作后立即将其添加回来？

我有两种访问元素的方法

document.getElementById('main')

和

$('#main')

我试图检查返回的元素，但我似乎没有找到附加 this.handleScroll 的 onScroll 属性。如果可能的话，我想暂时删除它并重新添加它。

我正在尝试创建一个 scrollSpy 效果。在我的导航栏中，我设置了 I 部分，然后滚动 id 为 'main' 的 div。但是，由于我在 main 上使用 onScroll 事件侦听器来检测屏幕上的内容以检测激活的部分，这导致了一些冲突。因此我需要在导航栏中做事时暂时挂起事件监听器。

【问题讨论】：

最直接的方法是检查某些条件或将滚动行为放在中间函数中
有没有办法区分真正的实际用户滚动与由 containerElement.scrollTop = X 引起的滚动？
我认为不会。就像programmaticScrolling = true; containerElement.scrollTop = x; programmaticScrolling = false;

标签： javascript jquery css reactjs

【解决方案1】：

您可以使用 jQuery 或不使用 jQuery 来做到这一点。

您可以创建一个可重复使用的函数来移除侦听器：

// To add listener.
$('#main').addEventListener('scroll', this.handleScroll); // jQuery
document.getElementById('main').addEventListener("scroll", this.handleScroll); // Without jQuery

// To remove listener.
$('#main').removeEventListener('scroll', this.handleScroll); // Remove listener with jQuery
document.getElementById('main').removeEventListener("scroll", this.handleScroll); // Remove listener without jQuery.

你可以在任何你想要的地方添加或删除监听器。

【讨论】：

还是听滚动停止？