Javascript 禁用用户浏览器中的箭头键滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8916620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable arrow key scrolling in users browser
提问by Kaninepete
I'm making a game using canvas, and javascript.
我正在使用画布和 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.
我尝试了以下解决方案：How to disable page scrolling in FF with arrow keys，但我无法让它工作。
回答by Zeta
Summary
概括
Simply prevent the defaultbrowser 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 keysand just discard the default action on the arrow keys:
如果您不需要当前按钮状态，您可以简单地删除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
参考
回答by Yom S.
For maintainability, I would attach the "blocking" handler on the element itself (in your case, the canvas).
为了可维护性，我会在元素本身（在您的情况下，画布）上附加“阻塞”处理程序。
theCanvas.onkeydown = function (e) {
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
e.view.event.preventDefault();
}
}
Why not simply do window.event.preventDefault()? MDNstates:
为什么不干脆做window.event.preventDefault()？MDN声明：
window.eventis 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.
window.event是专有的 Microsoft Internet Explorer 属性，仅在调用 DOM 事件处理程序时可用。它的值是当前正在处理的 Event 对象。
Further readings:
进一步阅读：
