當多個事件附加到按鈕時，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()為您解決了該問題。