在用户浏览器中禁用箭头键滚动

I'm making a game using canvas, and javascript.

我用canvas和javascript做了一个游戏。

When the page is longer than the screen (comments, etc.) pressing the down arrow scrolls the page down, and makes the game impossible to play.

当页面比屏幕长(评论等)时，按下向下的箭头滚动页面，使游戏无法进行。

What can I do to prevent the window from scrolling when the player just wants to move down?

当玩家想要向下移动时，我能做什么来阻止窗口滚动?

I guess with Java games, and such, this is not a problem, as long as the user clicks on the game.

我想对于Java游戏来说，只要用户点击游戏，这就不是问题。

I tried the solution from: How to disable page scrolling in FF with arrow keys ,but I couldn't get it to work.

我尝试了一个解决方案:如何用箭头键禁用页面滚动，但我无法让它工作。

2 个解决方案

#1

Summary

Simply prevent the default browser action:

简单地防止默认的浏览器操作:

window.addEventListener("keydown", function(e) {
    // space and arrow keys
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);

Original answer

I used the following function in my own game:

我在自己的游戏中使用了如下函数:

var keys = {};
window.addEventListener("keydown",
    function(e){
        keys[e.keyCode] = true;
        switch(e.keyCode){
            case 37: case 39: case 38:  case 40: // Arrow keys
            case 32: e.preventDefault(); break; // Space
            default: break; // do not block other keys
        }
    },
false);
window.addEventListener('keyup',
    function(e){
        keys[e.keyCode] = false;
    },
false);

The magic happens in e.preventDefault();. This will block the default action of the event, in this case moving the viewpoint of the browser.

魔法发生在e.preventDefault();。这将阻止事件的默认操作，在这种情况下移动浏览器的视点。

If you don't need the current button states you can simply drop keys and just discard the default action on the arrow keys:

如果您不需要当前按钮状态，您可以简单地删除键并只放弃箭头键上的默认操作:

var arrow_keys_handler = function(e) {
    switch(e.keyCode){
        case 37: case 39: case 38:  case 40: // Arrow keys
        case 32: e.preventDefault(); break; // Space
        default: break; // do not block other keys
    }
};
window.addEventListener("keydown", arrow_keys_handler, false);

Note that this approach also enables you to remove the event handler later if you need to re-enable arrow key scrolling:

注意，如果需要重新启用滚动箭头键，此方法还允许您稍后删除事件处理程序:

window.removeEventListener("keydown", arrow_keys_handler, false);

References

• MDN: window.addEventListener
• MDN:window.addEventListener
• MDN: window.removeEventListener
• MDN:window.removeEventListener

#2

For maintainability, I would attach the "blocking" handler on the element itself (in your case, the canvas).

对于可维护性，我将在元素本身上附加“阻塞”处理程序(在您的例子中是canvas)。

theCanvas.onkeydown = function (e) {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
        e.view.event.preventDefault();
    }
}

Why not simply do window.event.preventDefault()? MDN states:

为什么不简单地做window.event.preventDefault()?MDN状态:

window.event is a proprietary Microsoft Internet Explorer property which is only available while a DOM event handler is being called. Its value is the Event object currently being handled.

窗口。事件是一个专有的Microsoft Internet Explorer属性，只有当一个DOM事件处理程序被调用时才可用。它的值是当前正在处理的事件对象。

Further readings:

进一步阅读:

• https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view
• https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/view
• https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
• https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key