表单中一些默认行为

DOM结构:


表单中一些默认行为_第1张图片 

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



 

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


表单中一些默认行为_第2张图片
 

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

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


表单中一些默认行为_第3张图片

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

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

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

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

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


 

你可能感兴趣的:(JavaScript,html,表单,默认行为,新手注意)