首页 > 代码库 > button元素兼容问题浅析
button元素兼容问题浅析
缺省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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。