为什么我的DIV在获得焦点时不会捕获按键事件？

Question

我正在使用jQuery 1.12.我想要一个DIV来捕捉按键(特别是向下箭头),当它有焦点时.所以我跟着这个

 $('div.select-styled').bind('keydown', function(event) {
    console.log(event.keyCode);
    elt = $(this).search(".select-options li:hover");
    console.log(elt);
    switch(event.keyCode){
    // case up
    case 38:
        console.log(“up pressed.”)
        break;
    case 40:
        console.log(“down pressed”)
        break;
    }
 });

但这并没有抓住按键.在这里查看我的小提琴 - http://jsfiddle.net/cwzjL2uw/10/.单击"选择状态"菜单,或单击"姓氏"字段并单击"选项卡"以将焦点放在下一个DIV上.但是,当该菜单具有焦点时,单击任何键不会激活上面的处理程序,至少在Mac Chrome或Firefox上没有.

感谢任何帮助, -

Answer 1

问题是，当您按 时tab，焦点位于.select而不是 上.select-styled div element，因为.select是包含其余元素的父级。所以你可能需要将你的绑定keydown到.select.

$(".select").on('keydown',function(event) {
    console.log(event.keyCode);
    elt = $(this).search(".select-options li:hover");
    console.log(elt);
    switch(event.keyCode){
    // case up
    case 38:

        break;
    case 40:
        break;
    }
});

这是更新的小提琴