我发现了很多相关的问题(在这里和其他地方),但还没有专门找到这个。
我正在尝试侦听箭头键(37-40)的 keydown 事件,但是当以特定顺序使用箭头键时,后续箭头不会生成“keydown”事件。
示例: http ://blog.pothoven.net/2008/05/keydown-vs-keypress-in-javascript.html
- 在该页面上,单击“在此处输入->”框。
- 按住右箭头键:表格更新为键码 39
- 在继续按住右箭头键的同时,按住上箭头键:表格更新为 38
- 在继续按住左右箭头键的同时,按住左箭头键:表格不更新
但是,如果我做同样的事情但使用向下箭头键而不是向上箭头键,那么它会按预期工作。
此外,如果我使用键盘而不是箭头键,它会按预期工作。
我正在阻止 keydown 事件的正常操作(通过在事件侦听器中返回 false 和调用 preventDefault() ),但行为仍然存在。
我以为这可能是我的键盘,但它发生在笔记本电脑和朋友的机器上。
有没有人知道发生了什么?或者一些关于解决方法的好主意?
[编辑] 这是我的意思的一个例子。我意识到这可能不适用于所有浏览器,但我只是将它放在我的笔记本电脑上以展示我正在发生的事情(在 w7 上的 chrome 以及 mac os 10.6.8 上的 chrome 和 safari 上)
<html>
<body>
<script>
var keysDown = {};
addEventListener("keydown", function(e) {
keysDown[e.keyCode] = true;
document.getElementById('latestKeydown').value=e.keyCode;
}, false);
addEventListener("keyup",function(e){
delete keysDown[e.keyCode];
}, false);
var loop = function(){
document.getElementById('upinput').value=keysDown[38];
document.getElementById('downinput').value=keysDown[40];
document.getElementById('leftinput').value=keysDown[37];
document.getElementById('rightinput').value=keysDown[39];
}
setInterval(loop,1);
</script>
Up: <input id="upinput" type=text size=10><br />
Down: <input id="downinput" type=text size=10><br />
Left: <input id="leftinput" type=text size=10><br />
Right: <input id="rightinput" type=text size=10><br />
Recent Keydown: <input id="latestKeydown" type=text size=10><br />
</body>
</html>
再一次,问题是:如果我按住 A,然后是 S,然后是 D,然后是 F,然后是 G,你可以看到每次我开始按住一个新键时“Recent Keydown”都会更新。
但是,如果我按住右箭头,然后是向上箭头,然后是左箭头,我看不到左箭头键的“Recent Keydown”更新。