首页 > 代码库 > 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