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

我正在用画布和javascript制作一个游戏

当页面比屏幕长（评论等）时，按下向下箭头将向下滚动页面，使游戏无法进行

当播放器只想向下移动时，如何防止窗口滚动

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

我尝试了以下解决方案：，但无法使其正常工作。

Summary 只需浏览器操作：

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

如果您需要支持Internet Explorer或其他旧浏览器，请使用

e.keyCode

而不是

e.code

，但请记住，并且您需要使用实际代码而不是字符串：

//不推荐使用的代码！
window.addEventListener（“向下键”，函数（e）{
//空格键和箭头键
if（[32,37,38,39,40].indexOf（e.keyCode）>-1）{
e、 预防默认值（）；
}
}，假）；

原始答案 我在自己的游戏中使用了以下功能：

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

魔法发生在你的身体里。这将阻止事件的默认操作，在这种情况下，移动浏览器的视点

如果您不需要当前按钮状态，只需放下

键

，然后放弃箭头键上的默认操作：

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：
• MDN：
• MDN：接口

---

为了便于维护，我将在元素本身上附加“阻塞”处理程序（在您的示例中，是画布）

为什么不干脆执行

window.event.preventDefault（）

？国家：

window.event

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

进一步阅读：

---

我尝试了在按下箭头键时阻止滚动的不同方法，jQuery和本机Javascript都可以在Firefox中正常工作，但在最新版本的Chrome中不起作用。
甚至是

window.addEventListener

的显式

{passive:false}

属性，例如，建议将其作为唯一的工作解决方案

最后，经过多次尝试，我找到了一种在Firefox和Chrome中都适用的方法：

window.addEventListener（'keydown'，（e）=>{
if（e.target.localName！=“input”）{//如果需要筛选元素
开关（如钥匙代码）{
案例37://左
案例39://对
e、 预防默认值（）；
打破
案例38://以上
案例40://向下
e、 预防默认值（）；
打破
违约：
打破
}
}
}, {
capture:true，//这将禁用现代Chrome中的箭头键滚动
被动：false//这是可选的，我的代码在没有它的情况下工作
});

引用来自的

EventTarget.addEventListener（）

选项可选
选项对象指定有关事件侦听器的特征。可供选择的方案有：

捕获
一个

布尔值

，指示此类型的事件将被分派到注册的

侦听器

，然后再分派到DOM树中其下的任何

事件目标。

一次

…

被动的

一种
布尔值
，如果为true，则表示
侦听器
指定的函数永远不会调用
preventDefault（）
。如果被动侦听器调用了
preventDefault（）
，则用户代理除了生成控制台警告之外，不会执行任何操作

我非常喜欢这个解决方案，但它在chrome=/@Kaninepete中似乎不起作用：出现语法错误，我在keyup侦听器中使用了
lC.keys
而不是
keys
。修复了此问题，并在Firefox和Chrome中进行了测试。请注意，对
键的所有更改都是可选的，但由于您正在构建游戏…如果您这样做，并且您的网页上有任何字段输入，则您将无法使用空格键或箭头键来导航文本。我发现了一个很大的缺点。请注意，您确实需要使用
keydown
而不是
keydup
。这在chrome中仍然不起作用：（撕开我的蛇游戏
theCanvas.onkeydown = function (e) {
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
        e.view.event.preventDefault();
    }
}