`
zhaomiaojun
  • 浏览: 5755 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

争议的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
1
分享到:
评论
3 楼 bellstar 2010-02-24  
button是不推荐使用的标记,我最恨别人用不推荐使用的标记.
2 楼 sohighthesky 2010-02-24  
这个问题也是由于button的type导致 的,可以给button添加统一的type="button"就可以了
1 楼 sohighthesky 2010-02-24  
后面两个都是一个问题,前面那个是因为写法不规范的问题吧,

相关推荐

    songtianyi.github.io:博客页面

    songtianyi's blog 对文章有意见或者疑问的欢迎提 issue :) Highlights :fire: :NEW_button: :NEW_button: 二元决策图 :NEW_...关于 Rust GC 的争议 编程核心概念 :NEW_button: Go2 泛型设计草案更新 :NEW_button:

    java内部类解析.pdf

    自Java 1.1引入内部类以来,这种特性一直备受争议。内部类提供了访问外部类私有成员的能力,但如果不恰当使用,可能导致代码难以理解和维护。内部类主要分为四种类型:成员内部类、静态嵌套类、方法内部类和匿名内部...

    Delphi接口编程

    然而,多重继承作为一种特殊的继承方式,在实践中往往引发诸多争议,主要原因是它可能导致类结构过于复杂,并且子类可能被迫继承不需要的方法或属性。为了解决这些问题,许多现代编程语言引入了“接口”这一概念,...

    winform C#人民币大小写金额转换程序

    本项目"winform C#人民币大小写金额转换程序"是一个实用工具,旨在帮助用户将输入的数字金额自动转换为规范的中文大写,这在财务报表、发票和合同中非常常见,因为中文大写可以避免因数字篡改而引发的争议。...

    管理系统综合设计--二手交易市场

    3. GUI设计:运用VB的控件库构建美观且实用的界面,如Label、TextBox、Button等。 4. 数据验证:在用户输入信息时进行实时或提交时的验证,防止无效或恶意数据进入系统。 5. 安全性:使用加密技术保护用户密码,避免...

    电脑桌面更改开始按钮软件

    然而,Windows 8中开始按钮的消失引发了用户争议,随后的版本又恢复了这一功能,但外观和功能有所变化。 2. 更改开始按钮的动机: 个性化桌面是许多用户追求的目标,他们希望通过调整主题、壁纸、图标等元素,使...

    基于微信小程序的校园二手交易平台开发.docx

    - **组件**:提供了丰富的内置组件,如`&lt;button&gt;`、`&lt;navigator&gt;`等,方便开发者快速搭建界面。 ##### 2. 后端服务设计 后端服务是小程序的核心支撑,主要负责数据存储、用户认证、支付接口等功能。本项目的后端...

    Ribbon自定义Office2007功能区

    然而,Ribbon功能区的引入也伴随着一些争议和挑战,比如占用更多的屏幕空间,以及命令排列的固定性限制了某些用户的个性化需求。不过,微软通过提供最小化功能区、改进的键盘快捷键(KeyTips)等功能,不断优化用户...

    剪刀石头布

    "剪刀石头布",又称为"石头剪刀布"或"猜拳",是一种源自中国的古老游戏,常用于决策、娱乐或者解决简单的争议。在JavaScript编程语言中实现"剪刀石头布"游戏,可以为初学者提供一个有趣的实践项目,帮助他们更好地...

    MySimpleCalculator:这是一个简单的计算器

    在JavaScript中,可能会使用`addEventListener`方法来绑定点击事件,`innerHTML`属性来读取和更新显示屏的值,以及`eval`函数来执行实际的数学计算(虽然`eval`在安全性方面有争议,但在简单的计算器中可以接受)。...

    rock-paper-scisssors

    剪刀石头布游戏,又称“猜拳”或“井手”,是一种简单而有趣的互动游戏,通常用于决定决策或解决争议。在这个版本中,游戏是通过JavaScript编程语言实现的,它允许用户在网页上与电脑进行对战。 【JavaScript基础】...

    wicket文档

    尽管存在这样的争议,但Wicket通过提供一套独特的开发模式和功能集证明了自己的价值。它强调了开发者生产力的重要性,并且设计时充分考虑到了灵活性和扩展性。 **1.3 Wicket与目前Web框架的比较** - **1.3.1 ...

Global site tag (gtag.js) - Google Analytics