JavaScript实现按键长按时持续移动HTML对象的问题求助

你的代码有三个核心错误：

• 事件绑定和状态逻辑写反：把移动逻辑绑在了keyup（按键松开）事件上，还在事件触发时把key_left设为true。keyup只有松手瞬间才会触发，按住按键时根本不会执行，自然只能动一次，状态赋值时机完全不对。
• 死循环阻塞渲染线程：你加的while (key_left == true)没有任何退出逻辑，JS是单线程运行的，这个循环会一直占着执行资源，浏览器根本没机会重绘页面，也没机会响应后续按键事件修改key_left的值，直接导致页面卡死，对象完全动不了。
• 移动逻辑放错位置：就算把事件改对，直接依赖keydown事件的默认重复触发逻辑，会受系统按键重复率、触发延迟影响，移动卡顿不流畅，不是游戏类场景的标准实现。

用「按键状态标记 + 独立帧循环」的模式实现，逻辑完全解耦，不会卡顿也不会卡死：

• 单独监听keydown和keyup事件，回调里只做一件事：更新对应按键的按下/抬起状态标记，不要在事件回调里写任何移动逻辑。
• 用requestAnimationFrame启动一个和浏览器刷新率同步的主循环，每帧执行时检查当前哪些按键处于按下状态，对应更新对象位置即可。按住按键时状态一直为真，每帧都会触发移动，松开按键状态变假，移动自动停止。

// 统一管理所有监听按键的状态
const keys = {
  ArrowLeft: false,
  // 需要其他方向键直接在这里追加即可，比如ArrowRight、ArrowUp、ArrowDown
}
const myCircle = document.querySelector('.ball');

window.addEventListener('load', () =>{
  myCircle.style.position = 'absolute';
  myCircle.style.left = '0px';
  myCircle.style.top = '1200px';
  // 页面资源加载完成后启动游戏主循环
  requestAnimationFrame(gameLoop)
})

// 按键按下时，标记对应按键状态为真
window.addEventListener('keydown', (event) => {
  if (Object.prototype.hasOwnProperty.call(keys, event.key)) {
    keys[event.key] = true
  }
})

// 按键松开时，标记对应按键状态为假
window.addEventListener('keyup', (event) => {
  if (Object.prototype.hasOwnProperty.call(keys, event.key)) {
    keys[event.key] = false
  }
})

// 游戏主循环，和浏览器刷新率同步，每帧执行一次
function gameLoop() {
  const moveStep = 5 // 调整这个值可以改移动速度
  // 检查左键状态，按下就更新位置
  if (keys.ArrowLeft) {
    const currentLeft = parseInt(myCircle.style.left)
    myCircle.style.left = `${currentLeft - moveStep}px`
  }
  // 其他方向的移动逻辑在这里追加即可，比如右键就把减号改成加号

  // 注册下一帧回调，保证循环持续运行
  requestAnimationFrame(gameLoop)
}

你提到用Vue作为前端框架，不要直接用document.querySelector获取DOM操作样式，把小球的left、top值存在ref/reactive响应式变量里，模板上直接通过:style绑定位置即可，主循环里直接修改响应式变量的值，Vue会自动更新视图，核心逻辑和上面的原生版本完全一致。

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