当前位置: 代码迷 >> Web前端 >> 争论的button
  详细解决方案

争论的button

热度:282   发布时间:2012-11-23 22:54:33.0
争议的button

? 我一直不喜欢在页面中使用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的不好印象,不过也希望有人反驳我

1 楼 sohighthesky 2010-02-24  
后面两个都是一个问题,前面那个是因为写法不规范的问题吧,
2 楼 sohighthesky 2010-02-24  
这个问题也是由于button的type导致 的,可以给button添加统一的type="button"就可以了
3 楼 bellstar 2010-02-24  
button是不推荐使用的标记,我最恨别人用不推荐使用的标记.
  相关解决方案