jQuery的keypress()事件为什么没有触发？

Question

我正在尝试使用jQuery在按下左右箭头键时触发事件。使用下面的代码，我可以在任何字母数字键上触发事件，但光标键（上、下、左、右）没有触发任何事件。由于这是一款商业应用程序，我主要为IE用户开发网站。我在这里做错了什么吗？

$('document').keypress(function(e){
    switch (e.which) {
        case 40:
            alert('down');
            break;
        case 38:
            alert('up');
            break;
        case 37:
            alert('left');
            break;
        case 39:
            alert('right');
            break;
        default:
            alert('???');  
            }      
});

- Mark Struzinski

---

当前的jQuery文档中提到：“修改键和非打印键，如Shift、Esc和delete触发keydown事件，但不触发keypress事件”，这意味着keypress()不应该用于箭头键，而应该使用keydown()。 - crantok

Answer 1

e.which 在IE浏览器中无效，尝试使用 e.keyCode，如果您的目标是IE，则可能需要使用 keydown() 而不是 keypress()。

有关更多信息，请参见http://unixpapa.com/js/key.html。

- Nick Berardi

---

我仍然得到相同的结果。所有字母数字键都触发默认情况，但箭头键没有任何反应，甚至没有默认情况。出于某种原因，我认为主要的keypress()事件没有触发。 - Mark Struzinski

jQuery 规范化了 .which 属性，因此您可以可靠地使用它来检索键代码。 keyup() 在我使用的是 jQuery 2.1.0 的 IE11 的 IE10 文档模式下运行良好。 - Cees Timmerman

"keydown"和"keypress"并不等同。你暗示它们是可以互换的，但实际上它们是不同的。这就好比软件版的“如果你抬起手臂会疼痛，那就别抬手臂”。 - doug65536

Answer 2

使用jQuery，我用这种方式实现了它：

function checkKey(e){
     switch (e.keyCode) {
        case 40:
            alert('down');
            break;
        case 38:
            alert('up');
            break;
        case 37:
            alert('left');
            break;
        case 39:
            alert('right');
            break;
        default:
            alert('???');  
            }      
}

if ($.browser.mozilla) {
    $(document).keypress (checkKey);
} else {
    $(document).keydown (checkKey);
}

此外，您可以尝试这些插件，它们似乎可以为您完成所有工作：

http://www.openjs.com/scripts/events/keyboard_shortcuts

http://www.webappers.com/2008/07/31/bind-a-hot-key-combination-with-jquery-hotkeys/

- Jack Lawson

---

哇，搜索了很多，这是我找到的唯一一个讨论按键支持差异的浏览器响应的回复。 - NotMe

关于keypress和keydown取决于浏览器的那行非常重要。 - ankimal

Answer 3

你有一个字符串中包含单词“document”。请进行更改：

$('document').keypress(function(e){

到

$(document).keypress(function(e){

- Abhinay Mehta

Answer 4

当然，这是一个已经解决的问题，我想向您的讨论中添加一些内容。在Mozilla中，我观察到了这段代码的奇怪行为。

$(document).keydown(function(){
//my code 
});

代码被触发了两次。调试时我发现实际上有两个事件被触发了：'keypress'和'keydown'。我禁用了其中一个事件，代码表现出了期望的行为。

$(document).unbind('keypress');
$(document).keydown(function(){
//my code
});

这适用于所有浏览器，并且无需检查特定于浏览器的内容（如：if($.browser.mozilla){ }）。希望这对某些人有用。

- calyan

Answer 5

您的原始代码有$('document')...，应该写成$(document)没有引号。

- Denny