React JS中无法移除嵌套鼠标移动事件监听器的问题求助

核心问题 #

1. mousemove绑定错误：map.onmousemove = handleMouseMove(); 中加了括号，会立即执行handleMouseMove函数，实际绑定的是函数返回值（若函数无返回则为undefined），而非函数本身，导致移动事件不会触发。
2. mouseup重复绑定：每次触发mousedown都会给map新增一个mouseup监听器，多次按下左键后会堆积多个回调，逻辑混乱。
3. 左键判断逻辑错误：detectLeftButton函数最后一个分支中，event.button === 1不符合标准（标准中鼠标左键对应button === 0，1是中键），会导致部分场景下左键判断失效。
4. mouseup监听范围局限：仅在map上监听mouseup，若鼠标移出map区域后抬键，无法触发回调，导致mousemove监听器无法移除。

修复后的代码 #

function detectLeftButton(event) {
    // 排除组合键场景
    if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
        return false;
    }
    // 优先使用buttons属性（标准多键检测）
    if ('buttons' in event) {
        return event.buttons === 1;
    }
    // 其次使用which属性
    if ('which' in event) {
        return event.which === 1;
    }
    // 兼容旧浏览器，左键对应button === 0
    return event.button === 0;
}

// 定义mouseup回调函数，方便移除
function handleMouseUp() {
    handleMouseUpLogic(); // 原handleMouseUp的业务逻辑
    map.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
}

try {
    map.addEventListener('mousedown', (event) => {
        if (detectLeftButton(event)) {
            handleMouseDown(); // 原handleMouseDown的业务逻辑
            map.addEventListener('mousemove', handleMouseMove);
            // 绑定到document，确保鼠标移出map也能触发抬键事件
            document.addEventListener('mouseup', handleMouseUp);
        }
    });
} catch(err) {
    console.error(err); // 建议捕获错误时输出，方便调试
}

关键修改说明 #

• 修正mousemove绑定：使用addEventListener绑定函数引用（去掉括号），配合removeEventListener精准移除监听器。
• mouseup绑定到document：解决鼠标移出目标区域后无法触发抬键的问题。
• 统一左键判断逻辑：修正event.button的判断值，符合W3C标准。
• 避免重复绑定：每次mousedown仅绑定一次mouseup，且在handleMouseUp中移除自身，防止回调堆积。

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