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

Question

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

当页面长于屏幕（评论等）时，按向下箭头会向下滚动页面，导致游戏无法进行。

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

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

我尝试了以下解决方案：如何使用箭头键在 FF 中禁用页面滚动，但我无法让它工作。

Answer 1

总结

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

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

已弃用，您需要使用实际代码而不是字符串：

// 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

  界面

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 事件处理程序时才可用。它是 value 是当前正在处理的 Event 对象。

进一步阅读：

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

Answer 3

我尝试过在按下箭头键时阻止滚动的不同方法，包括 jQuery 和本机 Javascript - 它们在 Firefox 中都可以正常工作，但在最新版本的 Chrome 中不起作用。
即使是

{passive: false}

的显式

window.addEventListener

属性，建议将其作为唯一可行的解决方案，例如 here。

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

window.addEventListener('keydown', (e) => {
    if (e.target.localName != 'input') {   // if you need to filter <input> elements
        switch (e.keyCode) {
            case 37: // left
            case 39: // right
                e.preventDefault();
                break;
            case 38: // up
            case 40: // down
                e.preventDefault();
                break;
            default:
                break;
        }
    }
}, {
    capture: true,   // this disables arrow key scrolling in modern Chrome
    passive: false   // this is optional, my code works without it
});

引用

EventTarget.addEventListener()

来自 MDN

选项可选
   选项对象指定有关事件侦听器的特征。可用的选项有：

捕捉
   

Boolean

表示该类型的事件将先调度到已注册的

listener

，然后再调度到 DOM 树中其下方的任何

EventTarget

。
一次
   ...
被动
   

Boolean

，如果为 true，则表示由

listener

指定的函数永远不会调用

preventDefault()

。如果被动侦听器确实调用

preventDefault()

，则用户代理除了生成控制台警告之外不会执行任何操作。 ...

Answer 4

这是为 React 重写的已接受答案。

import { useEffect } from "react";

const usePreventKeyboardScrolling = () => {
  const onKeyDown = (e) => {
    if (
      ["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(
        e.code
      )
    ) {
      e.preventDefault();
    }
  };

  useEffect(() => {
    window.addEventListener("keydown", onKeyDown, false);
    return () => window.removeEventListener("keydown", onKeyDown);
  });
};

export { usePreventKeyboardScrolling };