jQuery的keypress事件为什么会触发多次？

Question

你好，我已经设置了一个自动完成输入框。我想在点击按钮或按下回车键时，触发重新打印表格的事件。按钮单击可以正常工作，但是回车键似乎会在停止之前触发多次（也就是说，表格会闪烁）

$('body').bind('keypress', function(e) {
        if(e.keyCode==13){
             var str = $('#Filter').val();
            $('#Table').fadeOut("slow").load('printShorts.server.php?Sortby=<?echo $sort;?>&dir=<?echo $direction;?>&filter='+encodeURIComponent(str)+'&usergroup=<?=$usergroup?>&no-cache=' + (new Date()).getTime() ).fadeIn("slow");
        }

}); 

这并不是一直发生，而且在不同的浏览器中表现也不同。

- devmonster

Answer 1

使用html文本框的keydown事件无法防止它被多次触发。你可以在 keydown 事件的 jquery 演示部分中看到这种行为：http://api.jquery.com/keydown/

一种可能的解决方案是使用事件处理程序 "one"（参见 http://api.jquery.com/one/）。它确保只处理一次事件：

jQuery("#createNewProduct").one("keydown", function (e) {
    //Do Stuff
});

- Beriz

---

我看到你做了什么 - Dishcandanty

啊哈...太棒了！这让我疯狂了！ - JustBaron

Answer 2

这是 keypress 事件的正确行为。只要按键保持按下状态，keypress 事件就会持续触发（就像在文本区域中按住某个字符键时，该字符将被添加相应的次数，这与 keypress 有关）。对于仅需处理一次的情况，请根据您的需求使用键盘按下或键盘松开事件。键盘松开和键盘按下事件都只会触发一次。如下所示：

{Key-Down} {Key-Press} {Key-Press} ..(as long as key is down).. {Key-Press} {Key-Up}

- techfoobar

Answer 3

http://api.jquery.com/keypress/

当浏览器注册键盘输入时，会向元素发送keypress事件。这类似于keydown事件，但在按键重复的情况下有所不同。如果用户按住键，keydown事件将被触发一次，但每个插入的字符都会触发单独的keypress事件。此外，修改键（如Shift）会触发keydown事件，但不会触发keypress事件。

请使用keydown事件。

- infojolt

Answer 4

关于keypress的文档说明如下：

.keypress()方法只是.on("keypress", handler)的简写，因此可以使用.off("keypress")进行分离。

因此，在绑定之前添加.off()即可分离处理程序。我还建议将.bind()函数替换为.on()，因为bind现已弃用。以下示例代码应该有效：

$('body').off().on('keypress', function(e) {

- Chris

---

+1. 这是正确的方法，因为顶部答案只允许按一次键。这个解决方案将允许多次按键，但仅在物理上多次按下键时才会生效。 - Jake Ireland

这应该是 $("body").off("keypress").on("keypress", ...。否则，.off() 函数将删除页面中附加到 $("body") 的所有事件（包括其他 JS 文件）。此外，.off("keypress") 可能会删除其他 JS 文件中的另一个 $("body").on("keypress", ...。因此，在使用此解决方案时一定要非常小心。 - Vahid

Answer 5

尝试将“keypress”更改为“keydown”。

当浏览器注册键盘输入时，会向元素发送keypress事件。这类似于keydown事件，但在按键重复的情况下不同。如果用户按住一个键，则会触发一次keydown事件，但是每个插入字符都会触发单独的keypress事件。

来自http://api.jquery.com/keypress/

- joshschreuder

Answer 6

只需解除绑定并重新绑定即可。

$('body').unbind().bind('keypress', function(e) {
....
}

- Sukumar

---

（AngularJS，jQuery）在Firefox浏览器中按Enter键时，keypress事件会多次触发。上述答案对我有用。 - PPr

在IE中无法工作。 - PPr