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

Question

这是一个陷阱 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 有焦点时，左右似乎被阻挡，但不是上下。

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

Answer 1

我可能没有完全理解这个问题，但看起来你想要:

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

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

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

主窗口

演示: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)

演示: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();

    };

} );