表单 onSubmit 与 onClick

Question

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

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

我在 google 上搜索的大多数答案都表明，区别在于onClick不会对通过return按键提交表单做出反应，但正如代码和框示例中所见，情况并非如此。

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

Answer 1

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

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