我找到了很多相关的问题(在这里和其他地方),但没有找到这个具体的问题。
我正在尝试监听箭头键(37-40)的按键事件,但是当以某种顺序使用箭头键时,后续的箭头键不会生成“keydown”事件。
Example: http://blog.pothoven.net/2008/05/keydown-vs-keypress-in-javascript.html
- 在该页面中,点击“在此输入 ->”框。
- 按住右箭头键不放:表格更新为按键代码39
- 继续按住右箭头键的同时,按住上箭头键不放:表格更新为按键代码38
- 继续按住右和上箭头键的同时,按住左箭头键不放:表格不会更新
然而,如果我使用下箭头键代替上箭头键,则结果符合预期。
另外,如果我使用数字键盘而不是箭头键,它也能正常工作。
我通过在事件监听器中返回false和调用preventDefault()来阻止keydown事件的正常操作,但行为仍然存在。
我以为可能是我的键盘问题,但在笔记本电脑和朋友的机器上都出现了这种情况。
有人对发生的情况有任何见解吗?或者有一些好的解决方法吗?
[编辑] 这是我所说的一个例子。我意识到这可能不适用于所有浏览器,但我只是在我的笔记本电脑上随便拼凑了一下,以演示对我正在发生的事情(在chrome上的w7上,以及在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,每当我开始按下一个新键时,您都可以看到“最近的按键”更新。 但是,如果我按住右箭头,然后向上箭头,再按左箭头,我不会看到“最近的按键”更新为左箭头键。