JavaScript removeEventListener移除事件监听器偶发失效问题

问题场景 #

在实现鼠标拖拽类交互时，逻辑为：目标元素触发mousedown事件时，为其绑定mouseup、mousemove、mouseleave三个事件监听器；完成交互后调用Remove_Scrolling_Listeners方法移除这些监听器，但移除操作偶发失效，导致后续交互异常。

核心原因分析 #

监听器无法稳定移除的最常见原因是绑定与移除时使用的不是同一个函数引用。如果初始代码在mousedown回调内动态创建匿名函数或新的函数实例（比如每次触发mousedown都重新定义处理函数），那么调用removeEventListener时传入的函数和之前绑定的是完全不同的引用，自然无法匹配移除。

典型错误代码示例：

// 错误：每次mousedown都创建新函数实例
targetEl.addEventListener('mousedown', () => {
  targetEl.addEventListener('mouseup', () => { /* 处理逻辑 */ });
  targetEl.addEventListener('mousemove', () => { /* 处理逻辑 */ });
  targetEl.addEventListener('mouseleave', () => { /* 处理逻辑 */ });
});

// 错误：移除时同样创建新函数，和绑定的引用不匹配
function Remove_Scrolling_Listeners() {
  targetEl.removeEventListener('mouseup', () => { /* 处理逻辑 */ });
  targetEl.removeEventListener('mousemove', () => { /* 处理逻辑 */ });
  targetEl.removeEventListener('mouseleave', () => { /* 处理逻辑 */ });
}

修正过程中的坑：事件被立即触发 #

按建议修改代码时曾犯过低级错误——绑定事件时直接调用了函数（加了括号()），示例：

// 错误：直接调用函数导致逻辑立即执行，而非绑定监听
targetEl.addEventListener('mouseup', handleMouseUp());

这种写法会立即执行handleMouseUp，并将其返回值（通常是undefined）作为监听函数传入，既无法正常绑定事件，还会导致逻辑提前触发。

最终解决方案 #

核心是保持绑定与移除时的函数引用一致，具体实现：

1. 提前定义所有需要绑定的事件处理函数，确保引用固定
2. 在mousedown回调内直接使用预定义的函数引用绑定事件
3. 移除监听器时，同样使用这些固定的函数引用

修正后的代码示例：

// 提前定义处理函数，保持引用唯一
function handleMouseUp() {
  // mouseup处理逻辑
  Remove_Scrolling_Listeners(); // 交互完成后移除监听
}

function handleMouseMove() {
  // mousemove处理逻辑
}

function handleMouseLeave() {
  // mouseleave处理逻辑
  Remove_Scrolling_Listeners();
}

// 绑定mousedown触发逻辑
targetEl.addEventListener('mousedown', () => {
  targetEl.addEventListener('mouseup', handleMouseUp);
  targetEl.addEventListener('mousemove', handleMouseMove);
  targetEl.addEventListener('mouseleave', handleMouseLeave);
});

// 统一的移除方法
function Remove_Scrolling_Listeners() {
  targetEl.removeEventListener('mouseup', handleMouseUp);
  targetEl.removeEventListener('mousemove', handleMouseMove);
  targetEl.removeEventListener('mouseleave', handleMouseLeave);
}

关键注意点 #

• 不要用匿名函数作为需要移除的事件监听器，因为无法获取相同引用进行移除
• 绑定事件时，传递的是函数引用而非函数调用（不要加括号()）
• 移除监听器时，必须保证事件类型、目标元素、函数引用三者完全匹配

内容的提问来源于stack exchange，提问作者FDavidov