JQuery not reading from multiple .on() calls?

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

Pregunta

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!

¿Fue útil?

Solución

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

Hope this helps ;)

Otros consejos

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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top