React中移除mousemove事件监听器失效问题求助

问题出在你添加和移除事件监听器时用了不一样的函数引用——每次写(e)=>move(e)都会生成一个全新的匿名函数，移除的时候找的不是之前绑定的那个，自然就失效了。

另外还有个坑：如果鼠标拖到元素外面再松开，元素自身的onMouseUp不会触发，导致监听器一直挂着，最好把mouseup事件绑定到document上。

const move = (e) => {
  setPosition({ top: e.clientY - 50, left: e.clientX - 65 });
};

const handleMouseDown = (e) => {
  // 直接传move函数，别用匿名函数包装
  backgroundRef.current.addEventListener('mousemove', move);
  // 绑定到document，确保鼠标在任何位置松开都能触发
  document.addEventListener('mouseup', handleMouseUp);
};

const handleMouseUp = (e) => {
  // 移除的是和添加时一模一样的move函数引用
  backgroundRef.current.removeEventListener('mousemove', move);
  document.removeEventListener('mouseup', handleMouseUp);
};

return (
  <div 
    ref={iconRef} 
    onMouseDown={handleMouseDown} 
    style={position} 
    className='icon-container'
  >
    <img draggable='false' src={image} alt=''/>
    <p>{text}</p>
  </div>
);

• 移除事件监听器的前提是：传递的函数引用必须和添加时完全一致，匿名函数或者新创建的函数都不行。
• 绑定mouseup到document是为了避免鼠标移出元素后无法触发移除操作，防止内存泄漏。
• 原元素上的onMouseUp可以删掉，因为已经在document上绑定了；如果需要元素内的额外逻辑，也可以保留，但核心的移除逻辑一定要放在document的mouseup处理里。

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