使用 iframe 阻止按键上的默认操作答案

【问题标题】：Blocking default action on keypress with iframe使用 iframe 阻止按键上的默认操作
【发布时间】：2011-12-05 18:10:58
【问题描述】：

这是一个问题 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。

谁能帮助我们解决如何停止页面滚动，并且仍然允许人们在游戏下方的评论框中键入 cmets？如果你阻止空格键，它会阻止人们在他们的文本中添加空格！

【问题讨论】：

标签： javascript jquery html iframe preventdefault

【解决方案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();

    };

} );

【讨论】：

感谢演示，清楚地表明它可以正常工作，当我实施它时，我看到了我犯的简单错误并让它正常工作！

【解决方案2】：

将其更改为仅捕捉游戏 div 时看看是否有帮助。

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

给你的游戏画布tabindex。值 0 会将画布元素置于基于源的常规 Tab 键顺序。然后它将能够接收焦点并充当关键事件的目标，这意味着您可以仅阻止源自您的画布的关键事件的默认操作和事件传播。

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

【讨论】：

您好，感谢您的回答。按照建议实施，iframe html 页面具有该代码，但仍向上/向下滚动页面。 FF 没问题，但 chrome 和 IE 上下滚动。如果它源自该帧，似乎不可能捕捉到 up down 键事件。

【解决方案5】：

我在将 iframe 中的游戏嵌入到 Wordpress 内容页面时遇到了同样的问题。遗憾的是，上述解决方案不适用于 keydown keyCodes 的 preventDefault() 和 stopPropagation()。所以我用一个切换到 body overflow: hidden 的 css 类解决了这个问题，并通过 keydown 设置/取消设置 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

【讨论】：