表单中一些默认行为

阅读更多

DOM结构：

 

注意一点，我没有给button指定type类型，很多人觉得语义化的button标签其实就是type="button",这是错误的！！！

 

当我点击取消或者确认按钮，页面发生了跳转！所以：表单中的button标签默认类型是submit

 

然后我顺便按下回车键,页面也会跟着调整如上图所示,行为二：表单中会自动注册回车提交事件，并且IE中表现一致！

在项目中绝大多数都是已ajax提交表单，没必要在form的action中填写url，还是刚才的DOM结构只是去掉了action属性(容易被忽略的)

通过debugger发现，先执行注册事件，然后又进行了一次表单刷新请求，

行为三:当未指名form action 属性和button type类型，会先触发自定义按钮事件然后表单请求事件（表单又重新刷新了一遍，坑点）

目前我所知道的表单默认行为就是以上几点，解决办法：

1.在form中添加 action="javascriopt:",秒杀上述所有默认行为;

2.button 添加 type="button"属性,或者在注册事件时候阻止默认行为e.preventDefault();

 

• 
• 大小: 14.7 KB

• 
• 大小: 21.4 KB

• 
• 大小: 16.8 KB

• 
• 大小: 1.6 KB

• 查看图片附件