当多个事件附加到按钮时，Enter键会触发click事件和keypress

Question

我将两个事件附加到一个按钮上，当按钮处于焦点状态时按下一个键时，会同时触发按键和单击事件。 但是，如果我单击按钮，则仅触发click事件。 通过添加e.preventDefault()似乎可以解决此问题，但我想了解为什么它首先会采用这种方式。 抱歉，如果这是重复的，但除了这个我找不到其他答案，但那里的解释不够清楚。 非常感谢。

 $('.btn').on('click keypress',function(e){ console.log(e.type); }); 

 <button type="button" class="btn" >click me</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 1

按键焦点

如果您按了（空格和Enter）以外的任何键，则仅会触发keypress事件

但

如果将焦点放在按钮上并按空格键或输入，则将触发两个事件，因为这也是浏览器的默认行为，也是出于同样的原因e.preventDefault()为您解决了该问题。