jQuery委托方法不适用于keydown和keypress答案

【问题标题】：jQuery delegate method not working for keydown and keypressjQuery委托方法不适用于keydown和keypress
【发布时间】：2013-06-14 22:03:42
【问题描述】：

我希望在按下 TAB 键时执行我的代码和e.preventDefault();。为了进行测试，我仅使用 alert(9); 检查了以下事件：

$().ready(function(){
    $("div").delegate(".note","keydown",function(e){
        //not working
    });

    $("div").delegate(".note","keypress",function(e){
        //not working
    });

    $("div").delegate(".note","click",function(e){
        //working fine
    });
});

只有 click 事件起作用，而 keypress 和 keydown 不起作用。

【问题讨论】：

对我来说似乎工作正常 -> jsfiddle.net/5BpEQ
这里相同 -> jsfiddle.net/hungerpain/Uuc5g
作为旁注，不推荐$().ready，你应该使用$(document).ready，并不是说它可以解决问题或任何事情！
笔记是表格吗？如果不是，那么您希望如何在除表单之外的任何内容上捕获 keydown 事件？

标签： javascript jquery html

【解决方案1】：

实际上，keydown 和 keypress 的目标是 body，除非某个元素处于焦点位置：

当一个元素被聚焦时，文档接收到的关键事件必须以那个元素为目标。可能没有元素聚焦；没有的时候元素被聚焦，文档接收到的关键事件必须是针对body元素。

来源：https://www.w3.org/TR/html50/editing.html#focus

所以问题不在于委派本身，而是使元素可聚焦（您的处理程序只是不会触发！）。对于能够接收焦点的任意元素，对应该具有关键事件处理程序的元素使用tabindex 属性（了解更多here）。

【讨论】：

【解决方案2】：

如果“.note”在一个接受焦点的元素中，这样的东西会起作用。

$(function(){
   $("div").delegate(".note","keydown",function(e){
       if(e.originalEvent.keyCode == 9){
           console.log('Tada!');
           e.preventDefault();
       }
    });
});

见：http://jsfiddle.net/fcEx5/

【讨论】：

【解决方案3】：

看看这个实现，它比你问的要复杂一些，但你可以利用它，它使用on() 而不是推荐的delegate()：

<button id="myButton"> Click Me </button>
<input type="text" id="myText" />

function myFunction(){
     alert("hi!");
}



$(document).ready(function(){

    $("#myButton").on("click",myFunction);
    $("#myText").on("keydown",function(e){
        var keyCode = e.keyCode || e.which; 
        if (keyCode == 9) { 
            e.preventDefault(); 
            myFunction();
          } 
    });

});

TAB按钮或点击按钮将触发该功能，还有一些关于on()的文档

.on() 方法将事件处理程序附加到当前选定的集合 jQuery 对象中的元素。从 jQuery 1.7 开始，.on() 方法提供附加事件处理程序所需的所有功能。

最后是工作的demo

【讨论】：

仅供参考 jQuery 事件对象已经具有 e.which 标准化，这是首选。