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

Question

我正在使用 Canvas 和 javascript 制作游戏。

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

当玩家只想向下移动时，如何防止窗口滚动？

我想对于 Java 游戏之类的，这不是问题，只要用户点击游戏即可。

我尝试了以下解决方案:How to disable page scrolling in FF with arrow keys ，但我无法让它工作。

Answer 1

总结

简单prevent the default浏览器操作:

window.addEventListener("keydown", function(e) {
    if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
        e.preventDefault();
    }
}, false);

如果您需要支持 Internet Explorer 或其他较旧的浏览器，请使用 e.keyCode 而不是 e.code，但请记住 keyCode is deprecated并且您需要使用实际代码而不是字符串:

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

原始答案

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

var keys = {};
window.addEventListener("keydown",
    function(e){
        keys[e.code] = true;
        switch(e.code){
            case "ArrowUp": case "ArrowDown": case "ArrowLeft": case "ArrowRight":
            case "Space": e.preventDefault(); break;
            default: break; // do not block other keys
        }
    },
false);
window.addEventListener('keyup',
    function(e){
        keys[e.code] = false;
    },
false);

奇迹发生在e.preventDefault(); .这将阻止事件的默认操作，在本例中移动浏览器的视点。

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

var arrow_keys_handler = function(e) {
    switch(e.code){
        case "ArrowUp": case "ArrowDown": case "ArrowLeft": case "ArrowRight": 
            case "Space": e.preventDefault(); break;
        default: break; // do not block other keys
    }
};
window.addEventListener("keydown", arrow_keys_handler, false);

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

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

引用资料

• MDN:window.addEventListener
• MDN:window.removeEventListener
• MDN:KeyboardEvent.code界面