JQuery not reading from multiple .on() calls?

StackOverflow https://stackoverflow.com/questions/22430310

Question

I am building a game, and using JQuery for my event listeners. I find that the .on() method would be suitable for what I am doing, but I can't seem to get both of my listeners to work in conjunction as planned.

I'm also not entirely sure to what I should be registering the .on() calls to, so that might be my problem, as I am just using the $(document) call.

Here is how I have my listeners setup:

$(document).ready(function(){
    $(document).on("keypress", function(key){
        switch(parseInt(key.which, 10)){
            case AKey:
            case LeftArrow:
                player.move(Left);
                break;
            case DKey:
            case RightArrow:
                player.move(Right);
                break;
        }
    });
    $(document).on("keyup", function(key){
        switch(parseInt(key.which, 10)){
            case UpArrow:
            case Spacebar:
                player.shoot();
                break;
        }
    });
});

Here is a JSFiddle to see it in action.

Please help!

Était-ce utile?

La solution

The arrow key events fire only onkeydown and not onkeypress, so you might consider changing the event.

Hope this helps ;)

Autres conseils

Have you tried like this:

$(document).ready(function(){
    $(document).on("keypress, keyup", function(key){
        switch(parseInt(key.which, 10)){
            case UpArrow:
            case Spacebar:
                player.shoot();
                break;
            case AKey:
            case LeftArrow:
                player.move(Left);
                break;
            case DKey:
            case RightArrow:
                player.move(Right);
                break;
        }
    });
});

One thing to be aware of is keypress will fire when a key is pressed and released, keydown fires when a key is pressed, and keyup fires when a key is released. I would imagine you'd want movement to occur using keydown, and use keypress for shooting.

I built a key binding library for this kind of thing, called keys.js. Check it out if you want something with a friendlier API.

https://github.com/bitwalker/keys.js

You should not need to parse the key code.

This answer is just for fun / reference. Key codes are from here.

<html>
    <head>
    <title>UberkeyDetector</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>

var keys = {
backspace:8, 
tab:9, 
enter:13, 
shift:16, 
ctrl:17, 
alt:18, 
pause:19, 
caps_lock:20, 
escape:27, 
page_up:33, 
page_down:34, 
end:35, 
home:36, 
left_arrow:37, 
up_arrow:38, 
right_arrow:39, 
down_arrow:40, 
insert:45, 
delete:46, 
_0:48, 
_1:49, 
_2:50, 
_3:51, 
_4:52, 
_5:53, 
_6:54, 
_7:55, 
_8:56, 
_9:57, 
a:65, 
b:66, 
c:67, 
d:68, 
e:69, 
f:70, 
g:71, 
h:72, 
i:73, 
j:74, 
k:75, 
l:76, 
m:77, 
n:78, 
o:79, 
p:80, 
q:81, 
r:82, 
s:83, 
t:84, 
u:85, 
v:86, 
w:87, 
x:88, 
y:89, 
z:90, 
left_window:91, 
right_window:92, 
select_key:93, 
numpad_0:96, 
numpad_1:97, 
numpad_2:98, 
numpad_3:99, 
numpad_4:100, 
numpad_5:101, 
numpad_6:102, 
numpad_7:103, 
numpad_8:104, 
numpad_9:105, 
multiply:106, 
add:107, 
subtract:109, 
decimal_point:110, 
divide:111, 
f1:112, 
f2:113, 
f3:114, 
f4:115, 
f5:116, 
f6:117, 
f7:118, 
f8:119, 
f9:120, 
f10:121, 
f11:122, 
f12:123, 
num_lock:144, 
scroll_lock:145, 
semi_colon:186, 
equal_sign:187, 
comma:188, 
dash:189, 
period:190, 
forward_slash:191, 
grave_accent:192, 
open_bracket:219, 
back_slash:220, 
close_braket:221, 
single_quote:222, 
};

(function($){
$(document).ready(function() {
    function whichKey( code ) {
        for (var k in keys) {
            if (keys[k] == code) return k;
        }
        return 'idk: '+code;
    };
    function say(ev, key) {
        console.log(ev, key);
        //$(document).append( ev + ' ' + key);
    };
    $(document).on("keypress", function(key){ say('keypress', whichKey( key.which) ); });
    $(document).on("keyup", function(key){ say('keyup', whichKey( key.which) ); });
    $(document).on("keydown", function(key){ say('keydown', whichKey( key.which) ); });
});
})(jQuery)

        </script>
        </head>
<body>
        wot?

        <form action="none">
            <textarea id="none" name="none" cols="80" rows="10">
            </textarea>
        </form>
</body></html>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top