我们在写前端表单页面的时候,为了更好的SEO,我们会使用form标签,但是我们经常的情况是:我们并不需要form标签的一些默认事件,比如:
1.form内只有一个input标签的话,回车会触发表单的提交事件
2.form没有写action的话,默认就是当前页面
3.from内的button标签如果没有设置 type="button"属性的话,那么点击该button会触发表单的提交事件
解决方案如下:
阻止1默认事件有两个解决方案:
- 添加一个隐藏的input框
- 绑定表单的提交事件,事件处理过程中写 return false
阻止3默认事件,建议非提交button填写type属性
在只有一个input框的情况下回车触发表单提交事件这个过程中的路径分析:
- 触发button的点击事件(该button是submit类型的)
- 触发表单的提交事件
- 表单提交
注意事项:
- 在该过程中,可以在任何一步终止该路径
- 并不是每一步都是必须的