键盘事件如何触发同级按钮的单击事件？（里面的jsfiddle）答案

【问题标题】：How does the keyboard-event trigger a sibling button's click event? (jsfiddle inside)键盘事件如何触发同级按钮的单击事件？（里面的jsfiddle）
【发布时间】：2015-09-02 19:45:12
【问题描述】：

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

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

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

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

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

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

为什么事件会发送到<button>？
为什么即使事件是按键事件，按钮也会触发其侦听器（点击和点击）？
为什么不使用 preventDefaults / stopPropagations。

【问题讨论】：

浏览器就是这么做的。如果一个表单中只有一个输入，您可以免费获得该行为。它对于登录表单之类的东西非常有用。
输入提交不是问题，如果你是这个意思。我的问题是事件的混合以及我无法取消那些我不想发生的事件。
另外，当我在表单中点击“Enter”时，我只从输入和按钮中获取事件；表格中没有任何内容。正如一个建议，使用console.log() 而不是alert() 会让生活更愉快。
如果您捕获的是“keydown”而不是“keyup”，那么您所要做的就是阻止该处理程序中的默认值 (event.preventDefaul())。这将阻止按钮“点击”事件和表单提交。
尖尖的，这不是初学者的问题。警报已到位以阻止页面重新加载。我知道 console.log。

标签： javascript jquery javascript-events

【解决方案1】：

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

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

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

为什么 preventDefault 不启动

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

可能的解决方案

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：