Mouse click sometimes causes keyboard input, how?

Question

Let me explain my situation... I'm making a 2D platformer game, where you can go around and shoot stuff. Going around uses W, A & D keys, and shooting is done with the mouse. When I do all of the actions separately, everything works, but when I click the mouse button, and press a key in the same time, my code starts acting as if the key was still pushed down. This happens only sometimes.

I register all the keyboard events like this:

<body onload="init()" onkeydown="press(event);" onkeyup="release(event);">

Here's the script that handles that:

var KEY = {W: 87, A: 65, S:83, D: 68, E: 69};

var input = {
    right: false,
    up: false,
    left: false,
    down: false,
    e: false
};

function press(evt) {
    var code = evt.keyCode;

    switch(code) 
    {
        case KEY.W: input.up = true; break;
        case KEY.A: input.left = true; break;
        case KEY.S: input.down = true; break;
        case KEY.D: input.right = true; break;
        case KEY.E: input.e = true; break;
    }
}

function release(evt)
{
    var code = evt.keyCode; 
    input.code = code;

    switch(code) 
    {
        case KEY.W: input.up = false; break;
        case KEY.A: input.left = false; break;
        case KEY.S: input.down = false; break;
        case KEY.D: input.right = false; break;        
        case KEY.E: input.e = false; break;
    }
}

Even when I don't register mouse events, this happens. Can someone explain why? And how do I fix this?

Have you tested this in multiple browsers? Sounds like a bug. — Jivings
You should not pass event-object through handler function's arguments. Retrieve event in actual handler. — Teemu
Yes, I have tested in both Firefox and Chrome, but I'm not sure of their versions. I also tested it on a small example from a credible source, here: nokarma.org/examples/player_input/version_2.html. It happens in both browsers as well. I'm not sure what you're trying to say, @Teemu, and a simple code example would be great. Lol Steve... — corazza

Teemu Teemu · Accepted Answer · 2012-02-26T18:00:05

EDITED

It seems, that the jerky behavior is not occasionally. If you press and keep left and then press up and release left, the movement continues. But, if you release up after a while, movement will stop. Ie. you can make continuous circular moves, but you can't get back to the original direction. This perhaps dues to the eventhandling process, using stack-type saving for event calls and their return-points.

Below is an example code, which does the trick. It uses arrow-keys to move the spot. The code is in global space for clarity, and done for IE only, but you just edit it as you wish.

<html>
<head>
<script>
function move(elem){
    if(i[37])elem.style.left=elem.style.pixelLeft-2;
    if(i[38])elem.style.top=elem.style.pixelTop-2;
    if(i[39])elem.style.left=elem.style.pixelLeft+2;
    if(i[40])elem.style.top=elem.style.pixelTop+2;
    return;
}   

function keyDn(){
    var key=window.event.keyCode;
    if(i[key]!==undefined) i[key]=true;
    return;
}

function keyUp(){
    var key=window.event.keyCode;
    if(i[key]!==undefined) i[key]=false;
    return;
}

window.onload=function (){
    spot=document.getElementById('movablespot');
    i={'37':false,'38':false,'39':false,'40':false};
    document.body.onkeydown=keyDn;
    document.body.onkeyup=keyUp;    
    a=setInterval(function (){move(spot);return;},5);
}    
</script>
</head>
<body>
<span id="movablespot" style="position:absolute;top:100px;left:100px;">O</span>
</body>
</html>

Mouse click sometimes causes keyboard input, how?

1 Answers