如何解决JavaScript中HTML5 Canvas游戏mouseup事件失效问题？

问题重现 #

我正在用HTML5 Canvas开发一款游戏，编写了控制模块处理键盘和鼠标输入，但遇到了mouseup事件异常：点击鼠标后游戏物体会开始移动，但松开鼠标后物体无法停止。

相关代码 #

export let
goLeft = false,
goRight = false,
doShoot = false;

export function addEventListeners() {
    // 键盘事件监听
    addEventListener('keydown', ({code}) => {
        switch (code) {
            case 'Numpad4': goLeft = true; break;
            case 'Numpad6': goRight = true; break;
            case 'Space': doShoot = true; break;
        }
    });

    addEventListener('keyup', ({code}) => {
        switch (code) {
            case 'Numpad4': goLeft = false; break;
            case 'Numpad6': goRight = false; break;
            case 'Space': doShoot = false; break;
        }
    });

    // 鼠标事件监听
    canvas.addEventListener('mousedown', ({offsetX}) => {
        (offsetX < canvas.width / 2) ? goLeft = true : goRight = true;
    });
    
    canvas.addEventListener('mouseup', () => {
        goLeft = goRight = false;
    });
}

问题原因 #

1. mouseup事件绑定范围有限：当前仅将mouseup绑定在canvas元素上，若按住鼠标时将光标移出canvas区域再松开，canvas无法捕获到mouseup事件，导致goLeft/goRight始终为true，物体持续移动。
2. canvas变量未明确获取：代码中直接使用canvas变量，但未看到获取DOM元素的逻辑，若canvas未正确指向页面中的canvas元素，事件绑定会直接失效。

修复方案 #

方案1：扩大mouseup事件的监听范围

将mouseup事件绑定到document上，确保无论光标在页面哪个位置松开，都能触发停止逻辑：

export function addEventListeners() {
    // 保留原有键盘事件代码...

    // 鼠标按下仍绑定在canvas上
    canvas.addEventListener('mousedown', ({offsetX}) => {
        (offsetX < canvas.width / 2) ? goLeft = true : goRight = true;
    });
    
    // 鼠标松开绑定到document
    document.addEventListener('mouseup', () => {
        goLeft = goRight = false;
    });

    // 可选：添加mouseout事件处理，防止光标移出canvas但未松开鼠标的情况
    canvas.addEventListener('mouseout', () => {
        goLeft = goRight = false;
    });
}

方案2：确保canvas变量正确获取

在模块开头添加canvas元素的获取逻辑，避免事件绑定失败：

// 替换成你页面中canvas的选择器
const canvas = document.querySelector('canvas');
// 或者通过ID获取：const canvas = document.getElementById('game-canvas');

export let
goLeft = false,
goRight = false,
doShoot = false;

// 后续addEventListeners函数代码...

验证方法 #

修改后测试两种场景：

• 在canvas内按住鼠标，松开后物体是否停止；
• 在canvas内按住鼠标，将光标移出canvas后再松开，物体是否停止。

内容的提问来源于stack exchange，提问作者João Vitor Dos Santos Silva