欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

表单中一些默认行为

程序员文章站 2022-04-18 21:30:20
...

DOM结构:


表单中一些默认行为
            
    
    博客分类: 各种问题整理 javascripthtml表单默认行为新手注意 

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


表单中一些默认行为
            
    
    博客分类: 各种问题整理 javascripthtml表单默认行为新手注意
 

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


表单中一些默认行为
            
    
    博客分类: 各种问题整理 javascripthtml表单默认行为新手注意
 

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

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


表单中一些默认行为
            
    
    博客分类: 各种问题整理 javascripthtml表单默认行为新手注意

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

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

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

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

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


 

  • 表单中一些默认行为
            
    
    博客分类: 各种问题整理 javascripthtml表单默认行为新手注意
  • 大小: 14.7 KB
  • 表单中一些默认行为
            
    
    博客分类: 各种问题整理 javascripthtml表单默认行为新手注意
  • 大小: 21.4 KB
  • 表单中一些默认行为
            
    
    博客分类: 各种问题整理 javascripthtml表单默认行为新手注意
  • 大小: 16.8 KB
  • 表单中一些默认行为
            
    
    博客分类: 各种问题整理 javascripthtml表单默认行为新手注意
  • 大小: 1.6 KB