方向键监听没反应，是我写错了吗？

博主钰岩提问于 2026-03-29 15:31:13 阅读 3

交互

我在做一个用方向键控制小方块移动的demo，但按上下左右键完全没反应。查了文档说要用keydown事件，也加了tabindex让div能获取焦点，可还是不行。是不是事件绑定哪里出错了？

这是我的代码：

<div id="box" tabindex="0" style="width:50px;height:50px;background:red;"></div>
<script>
  const box = document.getElementById('box');
  box.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowUp') {
      console.log('up');
    }
  });
</script>

我来解答赞 2 收藏

反馈

1 条解答

东方子骞 Lv1

问题出在事件绑定的元素上。你的代码把keydown事件绑定到了div元素上，但通常我们是在document对象上监听全局键盘事件，而不是直接在需要操作的元素上。

这里有个更清晰的做法：把事件绑定到document上，然后通过CSS控制div的焦点状态。这样不管页面上哪个元素有焦点，都能接收到键盘事件。

修改后的代码：



const box = document.getElementById('box');

let position = 0;



document.addEventListener('keydown', (e) => {

  if (e.key === 'ArrowUp') {

    console.log('up');

    position -= 10;

  } else if (e.key === 'ArrowDown') {

    position += 10;

  }

  // 更新方块位置

  box.style.transform = translateY(${position}px);

});



// 让div初始获取焦点

box.focus();

顺便说下，记得给div加个:focus样式，让用户知道它能获取焦点。这种小细节做对了会让用户体验更好。

2026-03-29 16:01