键盘事件keydown触发正常但keyup无响应的问题排查及单事件触发时的多事件处理方法

先看你代码里的几个关键问题，这也是导致keyup没反应的主要原因：

问题1：按键判断不匹配 #

你给keydown监听的是ArrowDown按键，但keyup监听的是ArrowUp按键——这意味着只有当你按下并松开ArrowUp键时，keyup里的代码才会执行。如果你测试时是按下ArrowDown然后松开，此时keyup事件的e.key是ArrowDown，自然不会触发你写的ArrowUp判断逻辑。

问题2：样式计算的语法错误 #

你的代码里处理box.style.top时犯了字符串拼接的错误：

• box.style.top = boxTop + "10px" 会把数字20和字符串"10px"拼接成"2010px"，这显然不是你想要的偏移效果
• box.style.top = boxTop - "10px" 会让数字和字符串相减，结果是NaN，浏览器会忽略这个无效的样式值

问题3：未同步更新boxTop变量 #

每次修改盒子位置后，你没有更新boxTop的值，所以下次触发事件时，还是用初始的20来计算，位置不会正确累积变化。

下面是修正后的代码，我调整了按键判断（让keydown和keyup对应同一组按键），修复了计算逻辑，并且同步更新变量，还加了基础样式方便你看到效果：

const box = document.createElement("div");
box.setAttribute("id", "box");
// 给盒子添加基础样式，确保能看到且定位生效
box.style.width = "50px";
box.style.height = "50px";
box.style.backgroundColor = "red";
box.style.position = "absolute";
document.querySelector("body").appendChild(box);

let boxTop = 20;
let boxLeft = 20;
// 初始化盒子位置
box.style.top = `${boxTop}px`;
box.style.left = `${boxLeft}px`;

document.addEventListener("keydown", (e) => {
  const keyName = e.key;
  if (keyName === "ArrowDown") {
    boxTop += 10;
    box.style.top = `${boxTop}px`;
  } else if (keyName === "ArrowUp") {
    boxTop -= 10;
    box.style.top = `${boxTop}px`;
  }
});

document.addEventListener("keyup", (e) => {
  const keyName = e.key;
  // 先验证事件是否触发，可根据需求修改逻辑
  console.log(`松开了按键：${keyName}`);
  // 示例：松开ArrowUp时微调位置
  if (keyName === "ArrowUp") {
    boxTop -= 5;
    box.style.top = `${boxTop}px`;
  }
});

当第一个事件触发、第二个事件没反应时的调试思路 #

遇到这种情况，可以按以下步骤排查：

• 验证事件是否真的触发：在第二个事件的回调里加console.log("keyup触发了", e.key)，看控制台是否有输出。如果有，说明事件没问题，只是逻辑出错；如果没有，继续排查。
• 检查事件绑定目标与冒泡：确认事件绑定的元素（比如这里的document）能接收到事件，有没有其他元素用e.stopPropagation()阻止了事件冒泡。
• 核对按键判断逻辑：确保你测试的按键和代码里的e.key匹配——比如箭头键是ArrowDown/ArrowUp，注意不要和keyCode混淆，也别写错按键名称。
• 排查语法与类型错误：打开浏览器控制台（F12），查看是否有报错（比如数字和字符串运算导致的NaN、变量未定义），这些会直接中断代码执行。
• 检查元素样式状态：比如你的盒子是否设置了position: absolute/fixed/relative？默认的static定位下，top/left样式不会生效，可能让你误以为事件没起作用。

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