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
button元素兼容问题浅析的更多相关文章
- 为什么要在<button>元素中添加type属性
在HTML中<button> 标签定义一个按钮. <button type="button">Click Me!</button> 在 butt ...
- input 和 button元素 作为提交、重置、按钮功用的区别。
首先,input元素和button元素 都是可以作为普通按钮.提交按钮.重置按钮的. <input type="button" value="button" ...
- html5--3.16 button元素
html5--3.16 button元素 学习要点 掌握button元素的使用 button元素 用来建立一个按钮从功能上来说,与input元素建立的按钮相同 button元素是双标签,其内部可以配置 ...
- HTML5 新模块元素兼容问题
新增块元素默认样式 下列HTML5新模块元素在IE8.9版本浏览器中没有被定义默认样式.为解决该问题,给下列元素添加“block”显示属性. 代码: article, aside, details, ...
- :input 匹配所有 input, textarea, select 和 button 元素
描述: 查找所有的input元素,下面这些元素都会被匹配到. HTML 代码: <form> <input type="button" value="I ...
- 【转】HTML5新增元素兼容旧浏览器方法
ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...
- 每日踩坑 2019-08-23 button 元素点击后刷新页面
button标签按钮会提交表单. 解决方案: <button class="btn btn-primary" type="button" id=" ...
- 对于button元素的理解
button有四种常用的类型: submit: 此按钮将表单数据提交给服务器.如果未指定属性,或者属性动态更改为空值或无效值,则此值为默认值. reset: 此按钮重置所有组件为初始值. butt ...
- jqurey datatable tableTools 自定义button元素 以及按钮自事件
版本 1.10.4 "dom": 'T<"clear">lfrtip', "tableTools": { //"sSw ...
随机推荐
- linux中UUID和LABLE
一.UUID 第一次看到UUID这个东西,是在Ubuntu系统中看到/boot/grub/grub.cfg中对kernel的配置:linux /boot/vmlinuz-2.6.31-14-ge ...
- TCP快速重传和快速恢复
当tcp传送一个分组时会设置一个定时器,如果在规定的实际间隔内没有收到ACK分组,那么则重新传输该分组,但是 如果tcp收到三个连续的ACK分组,此时不管是否过超时间隔则重传该分组,具体步骤如下: 1 ...
- spftlayer 安装及简单使用
1,yum -y install python-pip; pip(Python packet index);
- 百度地图 Android SDK - 检索功能使用的简单演示样例
百度地图 SDK 不仅为广大开发人员提供了炫酷的地图展示效果.丰富的覆盖物图层,更为广大开发人员提供了多种 LBS 检索的能力. 通过这些接口,开发人员能够轻松的訪问百度的 LBS 数据,丰富自己的移 ...
- [CSS] CSS Transitions: Delays and Multiple Properties
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery- ...
- Android系统默认Home应用程序(Launcher)的启动过程源代码分析
在前面一篇文章中,我们分析了Android系统在启动时安装应用程序的过程,这些应用程序安装好之后,还需要有一个 Home应用程序来负责把它们在桌面上展示出来,在Android系统中,这个默认的Home ...
- VB中DateDiff 函数解释
VB中DateDiff 函数使用方法 DateDiff (interval, Date1 , Date2[,firstweekofyear[,firstweekofyear]]) 返回一个Varia ...
- zabbix-check of pre-requisites
LAMP搭建完成后,访问http://ip/zabbix,在检查环境界面,有的检查项目提示fail.常见如下:zabbix:Check of pre-requisites1.PHP bcmath fa ...
- [Python笔记][第四章Python正则表达式]
2016/1/28学习内容 第四章 Python字符串与正则表达式之正则表达式 正则表达式是字符串处理的有力工具和技术,正则表达式使用预定义的特定模式去匹配一类具有共同特征的字符串,主要用于字符串处理 ...
- CSS彻底研究(1)
Github pages 博文 基本选择器 标记选择器h1 {...} 类别.class_name{...},两个class同时作用,如class = 'one two',冲突取前者 ID选择器 #i ...