javascript - 键盘事件如何触发兄弟按钮的点击事件？ (里面的jsfiddle)

Question

可以在此处测试和更改相关设置:http://jsfiddle.net/5hAQ8/9/

我有一个小表单(基本上只是一个带有清除按钮的输入字段)。 JavaScript 很简单，只是说明了问题。基本上它是输入 (keyup)、按钮 (click/tap) 和表单 (submit) 的三个监听器。 HTML 非常简单:

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

X 旨在清除字段，但这不是重点。当有人按下 enter 时，即使输入处于焦点状态，按钮也会被触发。您可以在上面链接的 jsfiddle 中自行测试。

一旦您在表单内按下 enter，您将看到三个警报:一个用于输入，一个用于按钮，一个用于表单。我完全不明白为什么要涉及按钮和表单？

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

• 为什么事件到达 <button>有吗？
• 为什么即使事件是 keyup 按钮也会触发它的监听器(在单击和点击时) ？
• 为什么不 preventDefault s/stopPropagation开始吧。

Answer 1

这个答案可以追溯到问题评论中的细节。感谢 Pointy 提供的许多详细信息。

为什么事件到达按钮和为什么点击/点击

默认表单提交(在 html5 规范中定义)。显然这是触发点击(我没想到)。

为什么 preventDefault 没有启动

在 keyup 之前触发表单的隐式提交。这回答了为什么 preventDefault 没有机会。它似乎没有标准化，但我测试的每个浏览器都这样做了。

可能的解决方案

我想我会为 keyCode==13 使用 keydown 或 keypress，其余为 keyup。对我来说似乎是最简单的解决方案。 (由 ninty9notout 建议，谢谢!)

这很好地回答了由三部分组成的问题。感谢所有做出贡献的人。