使用iframe阻止对按键的默认操作

这是一个问题22我无法弄清楚如何解决。 以我们主持的HTML5游戏为例：

http://www.scirra.com/arcade/action/93/8-bits-runner – 警告有声音！

该页面托管在scirra.com但出于安全原因，该游戏位于static1.scirra.net上的iframe中。

现在如果你在玩游戏时向左或向右，向上或向下按，整个窗口上下左右滚动。 当游戏没有集中时，防止默认似乎工作正常。 我们希望在玩游戏时防止这种默认动作！ 所以我们使用代码：

  var ar = new Array(32, 33, 34, 35, 36, 37, 38, 39, 40, 44); $(document).keydown(function (e) { var key = e.which; if ($.inArray(key, ar) > -1) { e.preventDefault(); return false; } return true; }); 

我们将它放在父页面和iframe页面上。 当iframe左右焦点似乎被阻挡，但没有up and down 。

任何人都可以帮助我们解决如何停止页面滚动，并仍然允许人们在游戏下方的评论框中键入评论？ 如果你阻止空格键，它会阻止人们在文本中添加空格！

Answer 1

我可能不完全理解这个问题，但似乎你想要：

1. 上，下，空间等只有在有焦点时才进入游戏窗口。
2. 上，下，空格等，有焦点时转到评论框。
3. 上，下，空间等，当有焦点时转到主窗口。

数字＃2和＃3是你什么都不做的自动发生的事情。 所以基本上你想要＃1。 我不明白为什么你需要在主窗口上的任何代码。

这在我的测试中适用于Chrome，Opera，FF，IE9，IE8，IE7。

主窗口

演示： http ： //jsfiddle.net/ThinkingStiff/Dp5vK/

HTML：

CSS：

 #game { border: 1px solid red; display: block; height: 100px; width: 200px; } #comment-box { height: 100px; width: 200px; } body { height: 1000px; width: 1000px; } 

游戏窗口（iframe）

演示： http ： //jsfiddle.net/ThinkingStiff/dtmxy/

脚本：

 $( document ).bind( 'keydown', function ( event ) { var keys = [32, 33, 34, 35, 36, 37, 38, 39, 40, 44]; if( keys.indexOf( event.which ) > -1 ) { event.preventDefault(); event.stopPropagation(); }; } ); 

Answer 2

看看它是否有助于你改变它只捕捉游戏div。

 $('div.arcade-content').on('keydown', 'div.game-wrapper', function (e) { ... }); 

Answer 3

关于空格键问题，如果用户只关注游戏下面的评论框，则必须检查你的keydown函数。 如果它是聚焦的，则暂时允许空格键。

Answer 4

给你的游戏canvas一个tabindex 。 值为0会将canvas元素置于常规的基于源的Tab键顺序中。 然后它将能够获得焦点并充当关键事件的目标，这意味着您可以防止仅来自您的canavas的关键事件的默认操作和事件传播。

 $canvas = $("#c2canvas"); $canvas.tabIndex = 0; var ar = [32, 33, 34, 35, 36, 37, 38, 39, 40, 44]; $canvas.keydown(function (e) { var key = e.which; if ($.inArray(key, ar) > -1) { e.preventDefault(); e.stopPropagation(); } });