表单onSubmit vs onClick

Question

<form>
  <input />
  <button
    onClick={e => {
      e.preventDefault();
      alert("clicked");
    }}
  >
    click
  </button>
</form>

如果我将onClick处理程序移动到form的onSubmit ，我将得到完全相同的行为。

我用Google搜索的大多数答案都表明， onClick不会对通过return键按下提交表单作出反应，但这并不是如在codesandbox示例中看到的那样。

除了处理DOM操作/事件模拟时，它们何时会表现不同？

Answer 1

从根本上说，这取决于浏览器。 某些浏览器可能会在按回车键提交表单时调用提交按钮的onClick ，但标准并未强制要求。 如果选择了提交按钮，其他人可能只在按下返回时调用onClick 。 除非手动点击按钮，否则其他人可能不会触发它。

如果您想要最佳的可移植性，请使用onSubmit来实现它的设计目的：检测表单提交。

Answer 2

另一个主要区别是事件的目标。

Note that the submit event fires on the <form> element itself, and not on any <button> or <input type="submit"> inside it. (Forms are submitted, not buttons.)

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event