Keypress和Keydown生成不同的行爲

Question

我試圖創建彈出div時按Enter鍵，而div包含一個按鈕（我腳本來啓動時，它將重點），當您再次按Enter時將關閉div。我從綁定keypress和​​收到輸入密鑰，最終得到不同的結果。

綁定「按鍵」

事情正常工作，與第一輸入鍵觸發了一個彈出框，另一個輸入鍵關閉彈出框。

請參閱此JSFiddle。

有約束力「的keydown」

這不能正常工作，因爲它激發起來，並立即關閉該彈出框（你將看不到），只有一個回車鍵。

請參閱此JSFiddle。

我的問題是爲什麼keydown會產生奇怪的行爲，就像爲我發射兩次輸入密鑰，但事實並非如此。如果我刪除按鈕焦點（），它將正常工作。這讓我感到困惑。

測試與Firefox和鉻。

Answer 1

每次彈出窗口打開時，您都在重新點擊點擊事件，所以每次點擊關閉按鈕時，它會多次觸發它，這會導致意外的行爲。

如：

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

此代碼意味着每次創建一個新的彈出窗口實例時，存在將綁定了另一個click事件的每一個$（「＃OK鍵」）。

至於它使用keydown vs keypress時立即關閉的原因，這是由於打開彈出窗口的時候，您已將焦點設置爲按鈕。

兩個關鍵事件的工作方式不同（在關鍵過程中發生的時間稍有不同）。看來，在keydown中，你正在改變實際行動中的焦點（按下鍵盤上的按鈕），然後繼續並觸發焦點點擊。

移除焦點會停止奇怪的雙觸發器行爲，因爲您不再綁定另一個單擊事件。

我建議改變你的單擊事件：

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

我也建議看jQuery's on event，而不是現場使用。