Question

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

我有一个小表单（基本上只是一个带有清除按钮的输入字段）。 JavaScript是微不足道的，只是说明了问题。基本上它是输入（keyup），按钮（click / tap）和表单（submit）上的三个听众。 HTML非常简单：

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

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

在表单中按[enter]后，您将看到三个警报：一个用于输入，一个用于按钮，一个用于表单。我无法理解为什么按钮和表格会涉及到什么？

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

Answer 1

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

为什么活动会转到按钮，为什么点击/点按

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

为什么preventDefault无法启动

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

可能的解决方案

我想我会使用keydown或keypress来获取keyCode == 13，其余的是keyup。对我来说似乎是最不善解决的问题。（由ninty9notout建议，谢谢！）

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

Answer 2

您可以通过在按钮元素上设置type="button"来解决此问题。这可以避免浏览器的任何默认行为。

可能的值是：提交...， reset ...，button：该按钮没有默认行为。它可以具有与元素事件相关联的客户端脚本，这些事件在事件发生时被触发