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

HTML页面在keydown上滚动

1 个答案: