如何为Web UI使用javascript键盘事件

Question

我有兴趣使用右侧\左箭头,空格键等JS事件.想知道什么是正确的方法.我想在这样的用户交互中滑动照片,使DIV出现等.

我想到了jQuery的可能实现,例如http://api.jquery.com/event.which/ 虽然我不确定这是最好的方法.

以下是这种UI实现的两个很好的例子(他们是如何做到的？) http://www.thesixtyone.com ; http://www.pictorymag.com/showcases/summer-jobless

我更喜欢那种#kinda guy,正在寻找正确的方向来挖掘.谢谢.

Answer 1

如果你已经在使用jQuery或计划,利用which它并不是一个坏主意.如果你看一下这个例子,它会告诉你如何做到这一点.将光标放在那里的文本字段中,然后按您感兴趣的键,即左箭头.显示的数字是keydown:您要查找的代码.

现在,当你写你自己的功能,你可能会绑定keydown到document并听取正确的钥匙.从那里,您可以根据按下的键来调度某些行为.

$(document).bind('keydown', function (e) {
    var code = e.which;
    switch (code) {
        case 39:
            // code to execute when right arrow is pressed
            some_right_arrow_action();
            break;
        case 37:
            // code to execute when left arrow is pressed
            some_left_arrow_action();
            break;
    }
    return;
});

您询问了Pictorymag.com等网站如何处理此功能.以下是Pictorymag.com所做的事情(我已将其代码解压缩以便于阅读):

$(document).keydown(function (e) {
    switch(e.keyCode) {
        case 39:
        case 74:
            node = s[++curr];
            if(node) {
                $.scrollTo(node,800);
            } else {
                curr = s.length-1;
            }
            break;
        case 37:
        case 75:
            node = s[--curr];
            if (node) {
                $.scrollTo(node, 800);
            } else {
                curr=0;
            }
            break;
    }
});