DOM元素移动脚本失效：聚焦后键盘控制无响应问题求助

核心问题分析 #

• 内联样式获取容错缺失：mouse.style.left仅能读取元素的内联样式，如果元素未通过内联方式设置过left（比如初始状态或通过CSS类定义位置），mouse.style.left会是空字符串，转成数字后得到NaN。此时执行left - 20会得到NaN，设置left: NaNpx属于无效CSS，浏览器直接忽略，导致元素无法移动。
• 重复绑定keydown事件：你在focus事件回调内绑定keydown监听，每次元素获得焦点都会新增一个keydown事件处理逻辑。多次触发focus后，按一次方向键会执行多次移动操作，可能导致元素位置异常（比如来回跳动），甚至看起来完全没效果。
• 焦点触发的不确定性：即使设置了tabindex="0"，部分场景下点击元素后可能无法自动获得焦点，导致keydown事件根本不会触发。

修复方案 #

1. 单次绑定keydown事件：将keydown监听移到focus事件外部，避免重复绑定。
2. 容错获取位置值：当mouse.style.left为空时，用getBoundingClientRect()获取元素实时视口位置作为初始值，确保不会得到NaN。
3. 替换废弃的keyCode：用event.key替代keyCode（keyCode已被标准废弃，兼容性不如key）。
4. 点击后主动触发focus：确保点击元素后，元素能稳定获得焦点，保证keydown事件可触发。

修复后的代码 #

mouse.setAttribute('tabindex', '0');

// 点击事件：设置定位并初始化位置，同时主动聚焦
mouse.addEventListener('click', (event) => {
    mouse.style.position = 'fixed';
    const rect = mouse.getBoundingClientRect();
    mouse.style.left = `${rect.left}px`;
    mouse.style.top = `${rect.top}px`;
    mouse.focus(); // 主动聚焦，确保keydown能触发
});

// 只绑定一次keydown事件
mouse.addEventListener('keydown', (event) => {
    const rect = mouse.getBoundingClientRect();
    // 容错获取当前left/top值：优先取内联样式，否则用getBoundingClientRect的结果
    let currentLeft = +mouse.style.left.replace('px', '') || rect.left;
    let currentTop = +mouse.style.top.replace('px', '') || rect.top;

    switch(event.key) {
        case 'ArrowLeft':
            mouse.style.left = `${currentLeft - 20}px`;
            break;
        case 'ArrowUp':
            mouse.style.top = `${currentTop - 20}px`;
            break;
        case 'ArrowRight':
            mouse.style.left = `${currentLeft + 20}px`;
            break;
        case 'ArrowDown':
            mouse.style.top = `${currentTop + 20}px`;
            break;
    }
});

额外说明 #

• getBoundingClientRect()返回元素相对于视口的实时位置，不受内联样式限制，适合作为位置获取的兜底方案。
• 用switch替代多个if判断，代码更简洁易维护。
• 主动调用mouse.focus()可规避浏览器行为差异导致的焦点丢失问题。

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