IE 浏览器下 button元素自动触发click?
为什么这么说呢?且看下面的情形:
当用户焦点在输入框中的时候,当用户按了“Enter”键之后,达到点击登录的效果;所以这里就监听了input的keydown事件,当keyCode是13的时候,就发送请求或者触发登录按钮的click事件。
在其他浏览器中都没有问题,但是在IE中,当我按了Enter之后,确实是请求了,但是同时也触发了下面“微博”按钮的click事件。百思不得姐啊!!
首先大概看下页面结构:
为什么会那样呢,猜测下:是不是因为当按下Enter键的时候,浏览器的焦点就自动跳到下一个“可用”button上呢,并且Enter了,只有这样才会解释上面的情况。下面就验证下::
1、我现在焦点在第一个账号输入框中,然后敲下Enter键,推测下应该是跳到登陆按钮上,有图有真相,
可见此时的this就是指向的登陆,OK验证成功。
2、仅仅靠1上的验证,还不足够,下面咱们就把焦点设在密码框中,按下Enter键,看看什么情况
可以看到的是在48行的地方,咱们设置了登陆按钮不可用,所以下一个可用button就是“微博”了,所以会触发微博按钮的click事件。
所以,猜测是合理的。
3、为什么说是Button呢,如果是a标签呢,我也做了实验,a标签是不会有这样的问题的,只有button会有,这里不再细说。
4、那该怎么解决呢?其实解决办法还是挺多的,比如可以把button换掉;我采用的是阻止keydown事件的默认行为preventDefault;的确解决问题。
OK,到此结束;欢迎吐槽!
// 后记:默认button是有type类型的 需要指定type=“button”等...所以这个问题是没有加type导致的。。
IE 浏览器下 button元素自动触发click?的更多相关文章
- jquery自动触发click事件
$("").trigger("click"); //jquery的自动触发事件
- CSS:在IE浏览器下,元素下沉一行的解决办法
HTML: <ul> <li><a href="">嘻嘻嘻嘻嘻嘻</a><span>2015-12-17</spa ...
- js添加的元素无法触发click事件
动态生成的元素,使用.on绑定事件,比如$(document).on("click",".divclick",function(){})
- button元素兼容问题浅析
缺省type属性值 <button>提交</button> button元素的type属性值有submit.button可选,在上面这种没有明确指出type值的情况下,浏览器的 ...
- jQuery 学习笔记(5)(事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件)
1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...
- chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。
参考blog来自 http://segmentfault.com/q/1010000000671971 chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式. 一.发现该问题的原因-是 ...
- <select>在chrome浏览器下背景透明问题
在上篇文章<只用CSS美化选择框>运用了背景透明的技巧来美化选择框,但在chrome浏览器下遇到了跟ie.ff不一样的透明效果,下面重现一下: 在一个大的div(背景红色)内放置一个sel ...
- 手机浏览器下IScroll中click事件
产品的h5页面几乎都使用了iscroll插件,如果a标签在iscroll里,在部分手机浏览器中会出现无法点击的情况,不管是绑定click事件还是使用a标签的href属性.href属性偶尔还会能点击,c ...
- [转]FireFox与IE 下js兼容触发click事件的代码
本文转自:http://www.jb51.net/article/16549.htm FireFox与IE 下js兼容触发click事件 ,对于需要兼容这两者的朋友,就需要参考下下面的代码了<a ...
随机推荐
- 开始学习css
今天开始学习css:应用一本<HTML5与CSS3网页设计基础> 先学习css样式规则声明. Body{ color:blue} 对应:选择符:{声明属性:声明值}: Background ...
- React History
1. browerhistory 1. 推荐使用, 2. nginx服务器要配置try-file,当找不到路由时跳转到首页 3. 使用浏览器history对象,不再允许直接访问nn 所以不能直接拷贝地 ...
- Android--简单的三级菜单
关于这个菜单应该在很多播放器应用里面可以看见,直接先上两张效果图吧,一张是该Demo的效果图,一张是优酷手机客户端的效果图. ...
- 优化Android应用内存的若干方法
原帖地址:http://www.open-open.com/lib/view/open1392013992317.html 在app开发的各个阶段中要考虑RAM的限制问题, 包括在设计阶段(正式开发之 ...
- Sqlite事物与锁
1事务 事务定义了一组SQL命令的边界,这组命令或者作为一个整体被全部执行,或者都不执行.事务的典型实例是转帐. 2事务的范围 事务由3个命令控制:BEGIN.COMMIT和ROLLBACK.BEGI ...
- Contoso 大学 - 8 – 实现继承
原文 Contoso 大学 - 8 – 实现继承 By Tom Dykstra, Tom Dykstra is a Senior Programming Writer on Microsoft's W ...
- Swift调用Objective-C
Swift调用Objective-C需要一个名为“<工程名>-Bridging-Header.h”的桥接头文件,如下图所示.桥接头文件的作用是为Swift调用Objective-C对象搭建 ...
- 移植FastBlur模糊算法至SDL
FastBlur是Android标配的模糊算法,这也在当时引起了一股毛玻璃热潮.IOS7就采用了此算法(这有抄袭Android之嫌,因为Android1.5就在标库中加入了此函数).算法效率很高,这也 ...
- 学习红帽企业版RHEL 6.4的两问
(1)看了一晚上的RHEL 6.4,到现在也没分清楚服务器版和桌面版.都说两个版本是一个文件,那装上之后怎么判断这到底用的是服务器版还是桌面版?还有人说在安装过程中会要求选择,用虚拟机安装根本没看到有 ...
- Apache 安装与配置
安装Apache 1.下载apache软件http://www.apache.org 2.安装 以管理员身份进行安装 3.设置主机名与域名 4.选择安装类型 5.自定义安装路径 6.开始安装 7.安装 ...