缺省type属性值

<button>提交</button>

button元素的type属性值有submit、button可选,在上面这种没有明确指出type值的情况下,浏览器的缺省值不一样;

IE6、IE7、IE8兼容模式缺省是 type="button",其它浏览器缺省是 type="submit" ,要验证这点可以把它放到form表单元素中,点击按钮看是否做了提交操作;演示DEMO


click事件劫持

在IE6、IE7、IE8中当button元素 type="submit" 时,在button元素上绑定click事件,然后当焦点不在这个button元素上时按回车键,这时候会触发button元素的点击事件,我管这个行为叫click事件劫持;

经过仔细探究发现,它只会触发非form表单中的第一个button元素的click事件,详细的可以看演示DEMO


我遇到过的问题

现在回头来看遇到的问题,在项目中我有一个button元素 <button>提交</button> 绑定了click事件,在IE8标准模式下,在页面上任何地方回车都会触发这个 button 元素的click事件,由上面的分析可以看出来,原因在于IE8标准模式下button元素缺省 type="submit" ,这就导致触发click事件劫持,详细的可以看演示DEMO


总结

要回避这个兼容问题,只要记得每次用button元素的时候都添加上合适的type就可以,这也是个编码好习惯;

文章来源:http://www.gafish.net/archives/1549

最新文章

  1. SQL Server 复制系列(文章索引)
  2. python 面向对象和类成员和异常处理
  3. C10K 问题引发的技术变革
  4. 浅谈我的编程之路——感谢引领我的leader
  5. sh.status()
  6. Linux网络编程9&mdash;&mdash;对TCP与UDP的简易封装2.0
  7. WINDOWS Server2003上部署一个Asp.Net的网站
  8. Oracle静态监听和动态监听
  9. POJ 2686 Traveling by Stagecoach
  10. web端表格测试用例
  11. linux基础命令用法
  12. linux独有的sendfile系统调用--“零拷贝,高效”
  13. 视频显著性检测-----Predicting Video Saliency using Object-to-Motion CNN and Two-layer Convolutional LSTM
  14. Oracle列自增-12c
  15. 【MySQL经典案例分析】 Waiting for table metadata lock
  16. 今天学习了flex布局
  17. 双11线上压测netty内存泄露
  18. Python全栈之路----函数进阶----迭代器
  19. Django高级
  20. Asp.Net_HttpModule的应用

热门文章

  1. 【转】 ubuntu下fastboot找不到devices
  2. mongodb----修改器
  3. 构建高性能web站点笔记一
  4. DBA 经典面试题(4)
  5. python中自定义类对象json字符串化的方法
  6. C# 使用枚举获取对应的数组值时
  7. qt model/view 架构自定义模型之QStringListModel
  8. JUnit基础及第一个单元测试实例(JUnit3.8)
  9. Qt之操作Excel
  10. 利用IIS7 解决URL访问限制问题