javascript - Keypress 和 Keydown 产生不同的行为

Question

我正在尝试在按下回车键时创建弹出 div，而 div 包含一个按钮（我编写脚本在它启动时聚焦），当您再次按下回车键时将关闭 div。keypress我从 binding中收到 enter 键keydown，最终得到不同的结果。

绑定'按键'

一切正常，第一个输入键启动一个弹出框，另一个输入键关闭弹出框。

请参阅此JSFiddle。

绑定'keydown'

这不能正常工作，因为它只用一个回车键立即启动并关闭弹出框（您不会看到）。

请参阅此JSFiddle。

我的问题是为什么 keydown 会产生奇怪的行为，这就像对我来说两次触发 enter 键，但事实并非如此。如果我删除按钮焦点（），它将正常工作。这让我很困惑。

用 Firefox 和 chrome 测试。

score 2 · Accepted Answer

每次弹出窗口打开时，您都会重新绑定单击事件，因此每次单击关闭按钮时，它都会多次触发它，这将导致意外行为。

例如：

var Popup = function(){
    $('#ok-button').live('click',function(){
        $('#popup').remove();
    });                
};

此代码意味着每次创建新的 Popup 实例时，存在的每个 $('#ok-button') 都会绑定另一个单击事件。

至于当您使用 keydown 与 keypress 时它立即关闭的原因，这是因为弹出窗口打开的那一刻您已经将焦点设置在按钮上。

这两个关键事件的工作方式不同（在关键过程中的触发时间略有不同）。看来，使用 keydown，您正在更改实际操作中间的焦点（按下键盘上的按钮），然后继续并触发焦点单击。

移除焦点会停止奇怪的双触发行为，因为您不再绑定另一个单击事件。

我建议更改您的点击事件：

$('#ok-button').live('click', function(){
    $('#popup').remove();
}); 
var Popup = function(){
    // Whatever               
};

我还建议查看jQuery 的 on 事件而不是使用 live。

1 回答 1