按右/下箭头键时圆形仅移动一次的问题排查求助

核心错误原因 #

• circle.style.left 和 circle.style.top 获取的是带单位的字符串（比如初始为空，第一次赋值后变成 0px），直接和数字 100 拼接会生成无效的 CSS 值（比如 0px100），浏览器无法识别，导致后续移动失效。
• 默认的 onkeydown 事件在按住按键时会有系统级延迟，不过这是次要问题，先解决数值解析的核心问题。

修正后的代码 #

JavaScript 部分

document.onkeydown = function(event) {
  var circle = document.getElementById("circle");
  // 获取当前位置，为空则默认0，提取数值部分
  var currentLeft = parseInt(circle.style.left) || 0;
  var currentTop = parseInt(circle.style.top) || 0;

  if (event.keyCode === 39) {
    circle.style.left = currentLeft + 10 + "px"; // 改成每次移动10px更平滑，也可保持100px
    console.log("right");
  } else if (event.keyCode === 40) {
    circle.style.top = currentTop + 10 + "px";
    console.log("bottom");
  }
}

CSS 部分（无需修改）

#circle {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: red;
  position: absolute;
}

HTML 部分（无需修改）

<div id="circle"></div>

额外优化（可选） #

如果想要按住按键时连续平滑移动，可以用定时器配合 keydown 和 keyup 事件：

let moveInterval;
const circle = document.getElementById("circle");
let currentLeft = 0;
let currentTop = 0;

document.addEventListener("keydown", function(event) {
  if (moveInterval) return; // 避免重复创建定时器
  moveInterval = setInterval(() => {
    if (event.keyCode === 39) {
      currentLeft += 5;
      circle.style.left = currentLeft + "px";
    } else if (event.keyCode === 40) {
      currentTop += 5;
      circle.style.top = currentTop + "px";
    }
  }, 20);
});

document.addEventListener("keyup", function() {
  clearInterval(moveInterval);
  moveInterval = null;
});

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