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;
});

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);