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

Question

我正在使用canvas和javascript制作游戏.

当页面长于屏幕(评论等)时,按向下箭头会向下滚动页面,使游戏无法播放.

当玩家想要向下移动时,我该怎么做才能防止窗口滚动？

我猜Java游戏等等,只要用户点击游戏就不会有问题.

我尝试了以下解决方案:如何使用箭头键禁用FF中的页面滚动,但我无法使其工作.

Answer 1

摘要

只需阻止默认的浏览器操作:

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

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

如果您不需要当前按钮状态,则只需删除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);

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

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

参考

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

Answer 2

为了可维护性，我会在元素本身（在您的情况下，画布）上附加“阻塞”处理程序。

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

为什么不干脆做window.event.preventDefault()？MDN声明：

window.event是专有的 Microsoft Internet Explorer 属性，仅在调用 DOM 事件处理程序时可用。它的值是当前正在处理的 Event 对象。

进一步阅读：

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