时间戳

首页 > 解决方案 > 为什么在文本框中按回车会触发另一个按钮中的单击事件

javascript - 为什么在文本框中按回车会触发另一个按钮中的单击事件

问题描述

考虑一下：

  const button = document.querySelector('#button');

  button.addEventListener('click', e => {
    e.preventDefault();
    alert("why did this happen?");
  });
<form>
<label for="input">L<input type="text" id="input" name="input"></label>
<button id="button">B</button>
</form>

进入文本框并按 Enter。您会看到一个警报，表明按钮的单击事件已被触发。但是为什么会这样呢？我可以理解，输入事件会冒泡到表单并触发提交。preventDefault防止这种情况。但是按钮与它有什么关系呢？

标签： javascripthtml

解决方案

在表单的单个文本框中按 Enter 会通过模拟单击默认提交按钮来触发表单提交。

我认为历史动机是，当人们向提交事件添加点击事件而不考虑人们可能期望 Enter 提交表单时，它仍然有效。

推荐阅读