当一个按钮同时绑定多个事件时，按下回车键既会触发点击事件又会触发按键事件。

Question

我有两个事件附加在一个按钮上，当我按下键盘时，如果该按钮获得了焦点，那么会触发keypress和click事件。但是，如果我单击按钮，则只会触发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>

- ConsoleLog

---

我是说，按下一个键会导致按钮点击，对吧？所以这既是点击又是按键。但是鼠标点击不是按键。它根本不涉及键盘。 - Taplar

正如您所提到的e.preventDefault()解决了这个问题 - 这意味着当按下“enter”按钮时，触发聚焦项的单击事件是默认浏览器行为。如果您注意到，当您按下除“enter”以外的键时，它只会触发“keypress”事件。 - ajai Jothi

@ajaiJothi 谢谢回复 - 回车键和空格键都会触发事件吗？ - ConsoleLog

并不是说按键被视为点击事件。而是用户的交互导致了元素被“点击”。例如，如果你聚焦于一个链接并按下回车键，也会为该链接生成一个点击事件。重要的是在键盘事件发生时你正在与哪个元素进行交互。 - Taplar

非常感谢@Taplar - 这是一个扎实的解释，肯定澄清了我的困惑！ - ConsoleLog

Answer 1

关于按钮聚焦

如果您按下除了（空格和回车）之外的任何键，则只会触发keypress事件。

但是

如果您聚焦该按钮并按下空格或回车，这将触发两个事件，因为这是浏览器的默认行为，出于同样的原因，e.preventDefault()为您解决了这个问题。

- aa-Ahmed-aa

---

感谢您的解释。 - ConsoleLog

@aa-Ahmed-aa 将 e.preventDefault() 添加到 click 方法或 keydown.enter 方法中？ - Andrew Koper