使用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左右焦点似乎被阻挡时,但不是up and down.

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

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

    };

} );