为什么我的输入密钥通过$ .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