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

这是一个难题，我真的不知道如何解决。以我们主持的HTML5游戏为例：

-警告有声音

该页面位于

scirra.com

上，但出于安全原因，游戏位于

static1.scirra.net

上的iframe中

现在，如果你在玩游戏时按left和right，up或down，整个窗口就会上下左右滚动。当游戏没有聚焦时，预防默认值似乎可以正常工作。当然，我们希望在玩游戏时防止这种默认操作！因此，我们使用代码：

    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具有左焦点和右焦点时，似乎会被阻止，但不会向上和向下

有人能帮我们解决如何停止页面滚动，并允许人们在游戏下方的评论框中输入评论吗？如果您阻止空格键，它将阻止人们在文本中添加空格
 当您将其更改为仅在game div上捕捉时，看看是否有帮助

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

关于空格键的问题，如果用户只关注游戏下方的评论框，你必须检查你的按键功能。如果已聚焦，则暂时允许空格键。
为游戏画布设置一个
选项卡索引。值为0时，画布元素将按常规的基于源代码的选项卡顺序排列。然后，它将能够接收焦点并作为关键事件的目标，这意味着您可以防止仅从您的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();
    }
});

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

向上、向下、空格等，仅当有焦点时才能转到游戏窗口
向上、向下、空格等，以便在有焦点时转到注释框
向上、向下、空格等，在有焦点时转到主窗口
如果你什么都不做，数字2和3会自动发生。所以基本上你想要#1。我不明白为什么主窗口上需要任何代码

在我的测试中，这在Chrome、Opera、FF、IE9、IE8、IE7中都能正常工作

主窗口
演示：

HTML:

游戏窗口（iframe）
演示：

脚本：

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

    };

} );

我在将我的游戏嵌入iframe到Wordpress内容页时遇到了同样的问题。遗憾的是，上述解决方案不适用于按键向下键代码的
preventDefault（）
和
stopPropagation（）
。因此，我通过css类切换到body
overflow:hidden
并通过按键或鼠标滚轮设置/取消设置iframe焦点来解决这个问题


document.addEventListener（'keydown'，函数（e）{
document.body.classList.add（'no-scroll'）；
document.getElementsByTagName（'iframe'）[0].focus（）；
});
文件。添加的文件列表器（“轮子”，功能（e）{
document.body.classList.remove（'no-scroll'）；
if（document.activeElement）{
document.activeElement.blur（）；
}
});
。无滚动{
溢出：隐藏；
}
你好，谢谢你的回答。按照建议实现，iframe html页面包含该代码，但仍然向上/向下滚动页面。FF正常，但chrome和IE会上下滚动。如果上下键事件源自该帧，则似乎不可能捕捉到它。感谢演示，它清楚地显示了它的工作原理，当我实现它时，我看到了我所犯的简单错误并使它工作起来！
#game {
    border: 1px solid red;
    display: block;
    height: 100px;
    width: 200px;
}

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

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

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

    };

} );