代码之家 › 专栏 › 技术社区 › tanishalfelven

JQuery没有读取多个.on()调用?

event-listener keyup keydown jquery javascript

tanishalfelven · 技术社区 · 11 年前

我正在构建一个游戏,并使用JQuery作为事件监听器。我发现 .on() 方法将适合我正在做的事情,但我似乎无法让我的两位听众按计划协同工作。

我也不完全确定我应该注册什么 .on() 呼叫,所以这可能是我的问题,因为我正在使用 $(document) 呼叫

以下是我如何设置听众:

$(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;
        }
    });
});

这里有一个 JSFiddle 看到它在行动。

请帮忙!

4 回复 | 直到 11 年前

wesolyromek 11 年前

箭头键事件仅触发 onkeydown 而不是 onkeypress ,因此您可以考虑更改事件。

希望这有帮助;)

cakan user6364254 11 年前

你试过这样做吗:

$(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;
        }
    });
});

bitwalker 11 年前

需要注意的一点是 keypress 当按下并释放按键时, keydown 按下按键时点火,以及 keyup 释放钥匙时点火。我想你会希望使用 键盘按下 和使用 按键 用于拍摄。

我为这种类型的东西构建了一个键绑定库,称为keys.js。如果您需要更友好的API,请查看它。

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

Ð¯ÑÐ¾ÑÐ»Ð°Ð² Ð Ð°ÑÐ¼Ð°ÑÑÐ»Ð»Ð¸Ð½ 11 年前

您不需要解析密钥代码。

这个答案仅供参考。关键代码来自 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>