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

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

向上，向下，空格等才能到游戏窗口。
向上，向下，空格等，以便在有焦点时转到评论框。
向上，向下，空格等，当有焦点时进入主窗口。

如果你什么也不做，那么＃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();

    };

} );

Answer 2

当你改变它以仅捕获游戏div时，看它是否有帮助。

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

Answer 3

关于空格键问题，如果用户只关注游戏下方的评论框，则必须检查你的keydown函数。如果它是聚焦的，则暂时允许空格键。

Answer 4

为您的游戏画布添加tabindex。值为0会将canvas元素置于常规的基于源的Tab键顺序中。然后，它将能够获得焦点并充当关键事件的目标，这意味着您可以防止仅来自您的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

我在将iframe中的游戏嵌入到Wordpress内容页面时遇到了同样的问题。遗憾的是，上述解决方案不适用于keydown keyCodes的preventDefault()和stopPropagation()。因此，我通过切换到正文overflow: hidden的css类解决了该问题，并通过按下按键或通过鼠标滚轮设置/取消设置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

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

5 个答案:

主窗口

游戏窗口（iframe）