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 ...
随机推荐
- java演示适配器(adapter)模式
为什么要使用模式: 模式是一种做事的一种方法,也即实现某个目标的途径,或者技术. adapter模式的宗旨就是,保留现有类所提供的服务,向客户提供接口,以满足客户的需求. 类适配器:客户端定义了接口并 ...
- Servlet & JSP - Java Web 访问资源的路径问题
假设 Web 工程的目录结构如下图所示,并且 HelloServlet 配置为 @WebServlet(name = "helloServlet", urlPatterns = { ...
- C#编写windows服务程序
Windows Service这一块并不复杂,但是注意事项太多了,网上资料也很凌乱,偶尔自己写也会丢三落四的.所以本文也就产生了,本文不会写复杂的东西,完全以基础应用的需求来写,所以不会对Window ...
- Asp.net 后台调用js方法(转)
1. 用Response.Write方法 代码如下: Response.Write("<script type='text/javascript'>alert("XXX ...
- Android开发—— Native 与 Web 之架构抉择
前 言 移动App是对URL和搜索引擎的革命,当今移动App开发貌似出现两大阵营:Native 和 Web,各自都认为自己才是未来的趋势,Native操作流畅.迅速,Web开发周期相对较短,还能轻松跨 ...
- Java 源码学习线路————_先JDK工具包集合_再core包,也就是String、StringBuffer等_Java IO类库
http://www.iteye.com/topic/1113732 原则网址 Java源码初接触 如果你进行过一年左右的开发,喜欢用eclipse的debug功能.好了,你现在就有阅读源码的技术基础 ...
- OC2_使用系统协议
// // Dog.h // OC2_使用系统协议 // // Created by zhangxueming on 15/6/24. // Copyright (c) 2015年 zhangxuem ...
- uva247 - Calling Circles(传递闭包+DFS)
题意:两人相互打电话(直接或间接),则在一个电话圈.即a给b打电话,b给c打电话,则a给c间接打电话. 注意:1.注意标记.2.注意输出格式. #include<iostream> #in ...
- From MSI to WiX, Part 4 - Features and Components by Alex Shevchuk
Following content is directly reprinted from : http://blogs.technet.com/b/alexshev/archive/2008/08/2 ...
- Poj OpenJudge 百练 1573 Robot Motion
1.Link: http://poj.org/problem?id=1573 http://bailian.openjudge.cn/practice/1573/ 2.Content: Robot M ...