4

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

我有一个小表格（基本上只是一个带有清除按钮的输入字段）。JavaScript 很简单，只是说明了问题。基本上它是输入（keyup）、按钮（点击/点击）和表单（提交）的三个侦听器。HTML 非常简单：

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

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

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

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

  • 为什么事件会发生<button>？
  • 为什么即使事件是按键事件，按钮也会触发其侦听器（点击并点击）？
  • 为什么 preventDefaults / stopPropagations 不启动。
4

2 回答 2

2

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

为什么事件会到达按钮以及为什么单击/点击

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

为什么 preventDefault 不启动

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

可能的解决方案

我想我会选择keyCode==13keydown或keypresskeyCode==13，其余部分选择 keyup。对我来说似乎是最少的黑客解决方案。（由 ninty9notout 建议，谢谢！）

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

于 2013-08-23T09:14:20.477 回答
2

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

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

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

于 2015-09-02T11:45:12.560 回答