Question

我希望在按下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
    });
});

只有点击事件才有效，而按键和按键不起作用。

Answer 1

实际上，keydown和keypress的目标是body，除非元素是焦点：

当元素聚焦时，文档接收的关键事件必须定位在该元素。可能没有关注的元素;什么时候没有元素是集中的，文档接收的关键事件必须是目标在body元素。

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

所以问题不是委托自己，而是让一个元素可以集中（你的处理程序就是不要开火！）。要使任意元素能够接收焦点，请对应该具有关键事件处理程序的元素使用tabindex属性（了解更多here）。

Answer 2

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

<强> JS

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

请参阅：http://jsfiddle.net/fcEx5/

Answer 3

查看此实现，它比您提出的要复杂一点，但您可以利用它，它使用on()而不是delegate()建议：

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

js

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委托方法不适用于keydown和keypress

3 个答案: