这是一个陷阱 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 有焦点时,左右似乎被阻挡,但不是上下
。
谁能帮我们弄清楚如何停止页面滚动,并且仍然允许人们在游戏下方的评论框中输入评论?如果您阻止空格键,人们将无法在其文本中添加空格!
最佳答案
我可能没有完全理解这个问题,但看起来你想要:
- 向上、向下、空格等仅只有在获得焦点时才转到游戏窗口。
- 上、下、空格等键可在获得焦点时转到评论框。
- 上、下、空格等键在获得焦点时转到主窗口。
#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();
};
} );
关于javascript - 使用 iframe 阻止按键的默认操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8389823/