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元素兼容问题浅析,布布扣,bubuko.com

时间： 2024-11-13 15:05:05

button元素兼容问题浅析的相关文章

input 和 button元素 作为提交、重置、按钮功用的区别。

首先,input元素和button元素 都是可以作为普通按钮.提交按钮.重置按钮的. <input type="button" value="button"> <input type="submit"> <input type="reset"> input元素默认 text类型 <button type="button">button</button&g

为什么要在&lt;button&gt;元素中添加type属性

在HTML中<button> 标签定义一个按钮. <button type="button">Click Me!</button> 在 button 元素内部,您可以放置内容,比如文本或图像.这是该元素与使用 input 元素创建的按钮之间的不同之处. <input type="button" value="Click Me!"> button既然定义了一个按钮,那么为什么还要为其添加type属性呢

javascript：&lt;button&gt; 元素

原文章:https://wangdoc.com/javascript/index.html <button> 元素 <button>元素继承了HTMLButtonElement接口.它有以下的实例属性. (1)HTMLButtonElement.accessKey HTMLButtonElement.accessKey属性返回一个字符串,表示键盘上对应的键,通过Alt + 这个键可以让按钮获得焦点.该属性可读写. (2)HTMLButtonElement.autofocus HTM

HTML5 新模块元素兼容问题

新增块元素默认样式 下列HTML5新模块元素在IE8.9版本浏览器中没有被定义默认样式.为解决该问题,给下列元素添加“block”显示属性. 代码: article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } 特殊新增块元素 下列HTML5新模块元素在IE8.9版本浏览器中没有被定义默认样式,考虑到其特殊性,特为下列元素添加

:input 匹配所有 input, textarea, select 和 button 元素

描述: 查找所有的input元素,下面这些元素都会被匹配到. HTML 代码: <form> <input type="button" value="Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input ty

javascript中兄弟元素兼容封装

<script> //获取下一个兄弟元素 function getNextElement(element) { if (element.nextElementSibling) { return element.nextElementSibling; } else { var next = element.nextSibling;//下一个兄弟节点 while (next && next.nodeType !== 1) {//有 而且不是我们要的元素 next = next.ne

jqurey datatable tableTools 自定义button元素 以及按钮自事件

版本 1.10.4 "dom": 'T<"clear">lfrtip', "tableTools": { //"sSwfPath": "~/Resources/Scripts/plugins/DataTables/swf/copy_csv_xls_pdf.swf" "sRowSelect": "multi", "aButtons": [

web： 屏蔽button元素的空格键和enter响应

用tab键可以在各种元素之间切换焦点,然后键盘上的空格和enter按键触发click事件,我这里不想要这种效果. 所以我需要屏蔽这两个按键. function keyup(e) { var currKey = 0; e = e || event; currKey=e.keyCode||e.which||e.charCode;//支持IE.FF if (currKey == 32) { //空格键 eventChangeMode(); //用这个按键做一些其他事 //屏蔽传递 e.preventD

button 浏览器兼容问题

ie8和360出现的问题 应该加上type属性