Keypress和Keydown产生不同的行为

Question

我正在尝试按下回车键时创建弹出式div，而div包含一个按钮（我在脚本启动时编写脚本），当你再次按下回车键时将关闭div。我从绑定keypress和keydown收到回车密钥，最终会得到不同的结果。

绑定'按键'

事情正常，第一个输入键会弹出一个弹出框，另一个输入键会关闭弹出框。

请参阅此JSFiddle。

绑定'keydown'

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

请参阅此JSFiddle。

我的问题是为什么keydown会产生奇怪的行为，就像为我发射两次输入密钥，但事实并非如此。如果我删除按钮焦点（），它将正常工作。那令我困惑。

使用firefox和chrome进行测试。

Answer 1

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

例如：

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

此代码表示每次创建新的Popup实例时，存在的每个$（'＃ok-button'）都会绑定另一个click事件。

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

两个关键事件的工作方式不同（在关键过程中稍微不同的时间点击）。看来，在keydown中，你正在实际操作的中间改变焦点（按下键盘上的按钮）然后继续并触发聚焦点击。

删除焦点会停止奇怪的双触发行为，因为您不再绑定其他点击事件。

我建议您更改点击事件：

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

我还建议查看jQuery's on event而不是使用直播。