代码之家 › 专栏 › 技术社区 › Avery235

表单OnSubmit与OnClick

reactjs forms html javascript

Avery235 · 技术社区 · 7 年前

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

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

我在google上搜索的大多数答案都表明不同之处在于 一次点击 不会对通过提交表单做出反应 return 按键,但这不是如代码沙盒示例所示的那样。

除了处理DOM操作/事件模拟之外,它们的行为何时会有所不同?

2 回复 | 直到 7 年前

Draconis 7 年前

基本上,这取决于浏览器。某些浏览器可能会调用提交按钮 onClick 当通过按返回键提交表单时,但标准不要求这样做。其他人可能只会打电话 一次点击 按回车键时 如果选择了提交按钮 . 其他人可能不会启动它,除非手动单击按钮。

如果您想要最好的便携性,请使用 onSubmit 它的目的是:检测表单提交。

Chris 6 年前

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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

7 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

7 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

7 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

7 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

8 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

8 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

8 月前