为什么我的 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/。单击“Select State”菜单，或单击“Last Name”字段并单击“Tab”以将焦点放在下一个 DIV。但是，当该菜单具有焦点时，单击任何键都不会激活上面的处理程序，至少在 Mac Chrome 或 Firefox 上对我来说没有。

感谢任何帮助，-

Answer 1

为您的.select-styled 元素提供tabindex 属性（例如：tabindex="1"）将允许它接收JavaScript 键盘事件。

---

解释： .keydown() 的 jQuery API 提到它只适用于可聚焦元素：

它可以附加到任何元素，但事件只发送到 具有焦点的元素。可聚焦元素可以在 浏览器，但表单元素总是可以得到焦点，所以是合理的 此事件类型的候选对象。

根据previous Stack Overflow answer，<div> 元素默认情况下不可聚焦，但DOM Level 2 HTML 声明除其他规则外，任何具有tabindex 的元素都可以接收焦点：

今天的浏览器在 HTMLElement 上定义了 focus()，但元素不会 除非它是以下之一，否则实际上要集中注意力：

• 带有href的HTMLAnchorElement/HTMLAreaElement
• HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement 但不是禁用的（如果你尝试，IE 实际上会给你一个错误）， 出于安全原因，文件上传存在异常行为
• HTMLIFrameElement（尽管聚焦它并没有什么用处）。 其他嵌入元素也可能，我还没有全部测试过。
• 任何带有 tabindex 的元素

---

或者，这可能是更好的做法，您可以简单地将您的keydown 事件处理程序绑定到$(document)，当元素接收到focus（您的jQuery 已经处理没有问题)，然后在blur上解除绑定。

Answer 2

问题在于，当您按下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;
    }
});

这是Updated Fiddle