爲什麼我的輸入密鑰通過$ .focus（）級聯？

Question

如果我有一個文本框和按鈕：

<input id='text'/> <button id='btn'>Click me</button> 

我的按鈕將焦點設置到文本框的地方在它的單擊事件：

$(document).ready(function(){ 

    $('#btn').click(function(event){ 
    console.log('btn '); 
    $('#text').focus(); 
    }); 

    $('#text').keyup(function(event){ 
    console.log('key '); 
    }); 

}); 

...如果你使用回車鍵觸發按鈕單擊，不知何故，接收焦點的文本元素也會收到輸入按鍵。

這裏是展示此行爲的小提琴：

https://jsfiddle.net/qup6keLd/

使用Tab鍵將焦點設置到該按鈕，然後按Enter鍵。這兩個事件都將被觸發。使用空格觸發按鈕的點擊不會執行此操作。爲什麼會發生這種情況，以及如何防止它（除去focus（）調用之外）？

Answer 1

使用keypress事件而不是keyup事件。

jQuery documentation details兩者的區別。

請參閱更新的小提琴：

$(document).ready(function(){ 
    $('#text').keypress(function(event){ 
    $('#output').append('key '); 
    }); 
    $('#btn').click(function(event){ 
    $('#text').focus(); 
    $('#output').append('btn '); 
    }); 
}); 

Updated Fiddle