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

这是第 22 条军规，我真的不知道如何解决。以我们托管的这个 HTML5 游戏为例：

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

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

现在，如果您在玩游戏时按左、右、上、下键，整个窗口就会上下、左、右滚动。当游戏不集中时，阻止默认值似乎可以正常工作。我们当然希望在玩游戏时阻止这种默认操作！所以我们使用代码：

    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.

谁能帮助我们解决如何停止页面滚动，并仍然允许人们在游戏下方的评论框中输入评论？如果您阻止空格键，人们将无法在文本中添加空格！

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

1. 向上、向下、空间等only仅当游戏窗口具有焦点时才转到游戏窗口。
2. 向上、向下、空格等可在获得焦点时转到评论框。
3. 向上、向下、空格等在获得焦点时转到主窗口。

如果您什么都不做，#2 和 #3 就会自动发生。所以基本上你想要#1。我不明白为什么你需要在主窗口上添加任何代码。

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

主窗口

Demo: http://jsfiddle.net/ThinkingStiff/Dp5vK/ http://jsfiddle.net/ThinkingStiff/Dp5vK/

HTML:

<iframe id="game" src="http://jsfiddle.net/ThinkingStiff/dtmxy/show/"></iframe>
<textarea id="comment-box"></textarea>

CSS:

#game {
    border: 1px solid red;
    display: block;
    height: 100px;
    width: 200px;
}

#comment-box {
    height: 100px;
    width: 200px;
}

body {
    height: 1000px;
    width: 1000px;
}

游戏窗口（iframe）

Demo: http://jsfiddle.net/ThinkingStiff/dtmxy/ http://jsfiddle.net/ThinkingStiff/dtmxy/

Script:

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

    };

} );