Javascript 键盘事件如何触发同级按钮'；点击事件？（内夹）

可以在此处测试和更改有问题的设置：

我有一个小表单（基本上只是一个带有清晰按钮的输入字段）。JavaScript很简单，只是说明了问题所在。基本上，输入（keyup）、按钮（click/tap）和表单（submit）上有三个侦听器。HTML非常简单：

<form>
    <input>
    <button>X</button>
</form>

X

X是用来清除字段的，但这不是重点。当有人按下

[enter]

时，即使输入处于焦点，按钮也会被触发。您可以在上面链接的jsfiddle中自己进行测试

在表单内按

[enter]

后，您将看到三个警报：一个用于输入，一个用于按钮，一个用于表单。我不明白为什么会涉及到按钮和表单

我对DOM事件的理解应该是源自输入的键盘事件，冒泡到文档。但我采取了一切措施来取消那个活动。所以我的问题有三个：

• 为什么事件会进入

• 为什么即使事件是一个keyup，按钮仍会触发其侦听器（单击并点击）
• 为什么预防默认/停止应用程序不起作用呢

---

这个答案回到了问题评论中的细节。感谢Pointy提供了许多细节
事件为什么进入按钮和为什么单击/点击
默认表单提交（如规范中所定义）。显然这是触发点击（我没想到）
为什么默认值不生效
表单的隐式提交在keyup之前触发。这就回答了为什么违约没有机会。它似乎没有标准化，但我测试的每一款浏览器都做到了这一点
可能的解决方案
对于keyCode==13，我想我将使用

keydown

或

keypress

，其余的使用keydup。对我来说，这似乎是最简单的解决方案。（ninty9notout建议，谢谢！）

---

这很好地回答了问题的三个部分。谢谢大家的贡献。
您可以通过在按钮元素上设置

type=“button”

来解决此问题。 这避免了浏览器的任何默认行为
可能的值为： 提交 重置…，按钮：按钮没有默认行为。它可以具有与元素事件关联的客户端脚本，这些脚本在事件发生时被触发

---

浏览器就是这么做的。如果表单中只有一个输入，则可以免费获得该行为。这对于登录表单之类的东西非常有用。如果你是这个意思的话，输入提交不是问题。我的问题在于事件的混合性以及我无法取消那些我不想发生的事件。此外，当我点击表单中的“回车”时，我只从输入和按钮中获取事件；表单中没有任何内容。正如一项建议，使用

console.log（）

而不是

alert（）

会让生活更愉快。如果您捕获的是“keydown”而不是“keyup”，那么您所要做的就是防止该处理程序中的默认（

event.preventedfaul（）

）。这将阻止按钮“点击”事件和表单提交。有意思的是，这不是初学者的问题。此警报用于阻止页面重新加载。我知道console.log。