Javascript: Keydown Event: “Up” arrow key preventing further arrow-key Keydown events? (answered: keyboard ghosting)

问题

I've found a lot of related questions (here and elsewhere), but haven't found this one specifically.

I'm trying to listen for keydown events for the arrow keys (37-40), however when using the arrow keys in a certain order, subsequent arrow do not generate "keydown" events.

Example: http://blog.pothoven.net/2008/05/keydown-vs-keypress-in-javascript.html

At that page, click in the "type here ->" box.
Press and hold right arrow key: table updates to keycode 39
While continuing to hold right arrow key, press and hold up arrow key: table updates to 38
While continuing to hold right and up arrow keys, press and hold left arrow key: table does not update

However, if I do the same thing but using down arrow key instead of up arrow key then it works as expected.

Additionally, if I use the keypad instead of the arrow keys it works as expected.

I am preventing the normal operation of the keydown event (both by returning false in the event listener, and by calling preventDefault() ), but the behavior persists.

I thought it might be my keyboard, but it happens on a laptop as well as a friend's machine.

Does anyone have any insight as to what is going? Or some good ideas on workarounds?

[edit] Here's an example of what I mean. I realize this may not work on all browsers, but I just threw this together on my laptop to demonstrate what is happening for me (on chrome on w7 and also chrome & safari on mac os 10.6.8)

<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>

Again, the issue is: If I hold down A, then S, then D, then F, then G, you can see the "Recent Keydown" updating every single time I begin to hold a new key.

However, if I hold down right arrow, then up arrow, then left arrow, I do not see "Recent Keydown" updating for the left arrow key.

回答1:

I can't speak on authority on this, but according to https://stackoverflow.com/a/4177260/562209 , unless you are working with simultaneous press of a modifier key(s) and a non-modifier key, regarding a multiple key press "the PC might not understand it due to the way keyboards are wired".

来源：https://stackoverflow.com/questions/10265560/javascript-keydown-event-up-arrow-key-preventing-further-arrow-key-keydown-e

标签

javascript

html

keyboard

keydown

onkeydown