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

转载于:https://www.cnblogs.com/gafish/p/3903297.html