HTML页面在按键按下时滚动

Question

我有一个游戏，玩家可以使用箭头键移动，但当我按上下箭头时，屏幕也会移动。有没有办法禁用这个功能？

我正在使用以下工具： 本地HTML页面，Google Chrome，Windows

（提醒一下 - 整个页面不是同时显示的）

以下是我的代码：

function moveCharacter()
{
    // left arrow
    if (keys[37])
    {
        move("left");
    }
    // up arrow
    if (keys[38])
    {
        move("up");
    }
    // right arrow
    if (keys[39])
    {
        move("right");
    }
    // down arrow
    if (keys[40])
    {
        move("down");
    }
}

document.body.addEventListener("keydown", function(e)
{
    keys[e.keyCode] = true;
    moveCharacter();
});

document.body.addEventListener("keyup", function(e)
{
    keys[e.keyCode] = false;
});

- DUUUDE123

Answer 1

发生这种情况的原因是在您观察到箭头键按下后，系统默认操作仍将继续发生-滚动屏幕。

event.preventDefault()

该方法可以阻止事件的默认行为。

---

现在，你只想防止箭头键的默认行为，而不是所有键的默认行为，否则你将失去其他键事件或函数，比如在输入框中输入文字。下面的代码实现了这个想法。

document.addEventListener("keydown", function (e) {
  // Only intercept the arrow keys, not all keys
  if([37,38,39,40].indexOf(e.keyCode) > -1){
    e.preventDefault();

    // Your code
    keys[e.keyCode] = true;
    moveCharacter();
  }
}, false);

- Drakes

---

谢谢 - 我意识到你可以在开头使用e.preventDefault();而不是使用indexOf和花括号 :)（请参见我的问题中的答案部分） - DUUUDE123

当然可以。但是，如果除了箭头或文本输入之外还有其他键，则它们将会丢失。这就是为什么需要严格检查只有箭头的原因。 - Drakes