Question

我正在用HTML5开发游戏，在我的游戏中你使用空格键进行拍摄。这很好用，直到我意识到在较小的屏幕上，空格键会滚动到页面的底部，隐藏游戏的一部分。如何阻止浏览器的热键使页面向下滚动？或者，如何在单击画布时冻结人物所具有的滚动。以下是游戏的链接：http://73.9.75.150:8886/zn/index.html

密钥处理代码：

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

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

Answer 1

典型的事件监听器调用如下所示：

window.addEventListener("keydown", function (e) {
    // shoot stuff
});

上述回调中的e参数是一个事件对象。它有一个方法调用preventDefault()，顾名思义，它将阻止事件的默认行为发生。

您可以使用它：

window.addEventListener("keydown", function (e) {
    if (e.keyCode === Keys.SPACEBAR) { // pseudo-code for key detection

        // shoot stuff
        e.preventDefault();

    }
});

这是一个标准功能，适用于大多数现代浏览器。您可能需要稍微处理一些旧版浏览器，或使用库来处理跨浏览器事件问题。

Answer 2

可能的解决方案：

document.addEventListener('keydown', function(e){
  if(e.keyCode === 32){
    e.preventDefault();
  }
});

如何停止浏览器的热键？

2 个答案: