? 我一直不喜欢在页面中使用button元素,因为它曾经让我头痛过,最近在项目的维护过程中又碰到了这个问题,所以抛出了发一下牢骚。
? button作为表单提交,时间触发,或许来说很方便,很多人喜欢用它,是因为它有自己的外观,省却写CSS的麻烦,但是仅仅因为这个原因,未免也太牵强了,我不是UI,所以不知道button在界面设计是否还有其他的优势,但是作为也带入了一些不必要的麻烦,特别是在ie8跟FF下面。
? 一开始因为不喜欢button,是因为触发事件后,自动会刷新页面,但是有些场合并不需要刷新页面,于是潜规则的在页面事件中统一用来<a>标签或者自己在<div><span>标签中使用onclick。
? 但是在维护项目中,发现页面中使用了很多button,不仅在表单提交中用button,在一些页面效果中也使用button,于是决定历数button的罪状(可以有点左倾思想了)。
? 1. button 的取值问题
?? 这是个常见的问题,先看代码:??
<script> function a(){ alert("a") ; alert(document.getElementById("bb").value) ; } </script> <body onload="a()"> <button value="正确的值" id="bb"> <span style="color:red;">错误的值</span> </button> </body>
?? 在IE下执行代码会发现,其实它并没有取得真实的value值,jQuery1.3.2中也有这个问题
? 2.ie8自动表单提交
??? 源码
<button onclick="a()" value="test"> </button>
?? 但是在ie8下,它会变成
<button onclick="a()" value="test" type="submit"> </button>
??? 于是当你在触发onclick时间后,它会执行自带的submit时间,导致表单提交页面刷新
? 3.ie8下button的键盘enter问题
??? 类似上面的问题
<button onclick="next()" value="test"> </button>
??? 由于button在ie8下自带submit属性,当触发键盘enter事件时,也会触发表单提交事件。
??? 最常见应用是,用button最为分页的跳转按钮,本希望通过键盘回车跳转下一页面,但在ie8下面
??? 它触发submit事件,使分页页面出现bug
? 这是我碰到过的问题,加深了对button的不好印象,不过也希望有人反驳我