https://stackoverflow.com/questions/22430310
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianThe arrow key events fire only onkeydown and not onkeypress, so you might consider changing the event.
Hope this helps ;)
JQuery not reading from multiple .on() calls?
-
15-06-2023 - |
سؤال
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!
المحلول
نصائح أخرى
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.
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>
لا تنتمي إلى StackOverflow
