使用iframe阻止默认的按键动作。

Question

这是个陷阱，我实在想不出如何解决。 就拿我们主持的这款HTML5游戏来说吧。

http:/www.scirra.comarcadeaction938-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.

有谁能帮助我们解决如何停止页面滚动，并且仍然允许人们在游戏下方的评论框中输入评论？ 如果你阻止空格键，就会阻止人们在他们的文本中添加空格！这是个问题，我真的不知道如何解决。

Answer 1

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

1. 上、下、空格等键都要... 只是 当该窗口有焦点时，才转到游戏窗口。
2. 上、下、空格等键，当该窗口有焦点时，转到评论框。
3. 当该窗口有焦点时，上、下、空格等键转到主窗口。

第2条和第3条是在你什么都不做的情况下自动发生的。所以基本上你想要的是#1。我不明白为什么你需要在主窗口上写任何代码。

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

主窗口

演示。http:/jsfiddle.netThinkingStiffDp5vK

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.netThinkingStiffdtmxy。

脚本。

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

关于空格键的问题，你必须在你的按键功能中检查用户是否只是关注了游戏下方的评论框。如果是聚焦的，那就暂时允许空格键。

Answer 4

给你的游戏画布一个 tabindex. 值为0将使canvas元素处于常规的基于源的标签顺序。然后，它将能够接收焦点并作为关键事件的目标，这意味着您可以防止仅源自您的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();
    }
});

Answer 5

我在将我的游戏嵌入到一个Wordpress内容页面的iframe中时，也遇到了同样的问题。遗憾的是，上面的解决方法并不能用于 preventDefault() 和 stopPropagation() 的keydown keyCodes。所以我用一个css类切换到body来解决。overflow: hidden 并设置取消按键设置iframe焦点或鼠标滚轮滚动页面。

document.addEventListener('keydown', function(e) {
  document.body.classList.add('no-scroll');
  document.getElementsByTagName('iframe')[0].focus();
});
document.addEventListener('wheel', function(e) {
    document.body.classList.remove('no-scroll');
    if (document.activeElement) {
        document.activeElement.blur();
    }
});

.no-scroll {
    overflow: hidden;
}

这里是工作示例。Boulder Dash