表單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