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

我正在使用canvas和JavaScript进行游戏。

当页面长于屏幕（注释等）时，按下向下箭头将向下滚动页面，使游戏无法播放。

我可以做些什么来防止当玩家想要移动时滚动窗口？

我想用Java游戏等等，只要用户点击游戏，这不是一个问题。

我试着从下面的解决scheme： 如何禁用页面滚动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); 

原始答案

我在我自己的游戏中使用了以下function：

 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(); 。 这将阻止事件的默认操作，在这种情况下移动浏览器的视点。

如果您不需要当前的button状态，则只需放下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