为什么这么说呢?且看下面的情形:

当用户焦点在输入框中的时候,当用户按了“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?的更多相关文章

  1. jquery自动触发click事件

    $("").trigger("click"); //jquery的自动触发事件

  2. CSS:在IE浏览器下,元素下沉一行的解决办法

    HTML: <ul> <li><a href="">嘻嘻嘻嘻嘻嘻</a><span>2015-12-17</spa ...

  3. js添加的元素无法触发click事件

    动态生成的元素,使用.on绑定事件,比如$(document).on("click",".divclick",function(){})

  4. button元素兼容问题浅析

    缺省type属性值 <button>提交</button> button元素的type属性值有submit.button可选,在上面这种没有明确指出type值的情况下,浏览器的 ...

  5. jQuery 学习笔记(5)(事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件)

    1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...

  6. chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。

    参考blog来自 http://segmentfault.com/q/1010000000671971 chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式. 一.发现该问题的原因-是 ...

  7. <select>在chrome浏览器下背景透明问题

    在上篇文章<只用CSS美化选择框>运用了背景透明的技巧来美化选择框,但在chrome浏览器下遇到了跟ie.ff不一样的透明效果,下面重现一下: 在一个大的div(背景红色)内放置一个sel ...

  8. 手机浏览器下IScroll中click事件

    产品的h5页面几乎都使用了iscroll插件,如果a标签在iscroll里,在部分手机浏览器中会出现无法点击的情况,不管是绑定click事件还是使用a标签的href属性.href属性偶尔还会能点击,c ...

  9. [转]FireFox与IE 下js兼容触发click事件的代码

    本文转自:http://www.jb51.net/article/16549.htm FireFox与IE 下js兼容触发click事件 ,对于需要兼容这两者的朋友,就需要参考下下面的代码了<a ...

随机推荐

  1. MySql索引的优缺点

    优点 有了索引.对于记录数量很多的表,可以提高查询速度. 缺点 索引是占用空间的. 索引会影响update insert delete速度 ALERT!!! 1.索引要创建在where和join用到的 ...

  2. 整合Spring与Hibernate

    在学习spring的时候,要整合hibernate,本来是看起来挺简单的,但是遇到的远要比想到了多,而且多很多,期间几天一个bug实在难调,几度放弃,但终究柳暗花明,抑制不住喜悦就想着分享一下成果吧. ...

  3. Android Studio工程目录介绍

    来自知乎: Android Studio工程目录结构 .gradle 是gradle运行以后生成的缓存文件夹. .idea 是android studio/Intellij IDEA工程打开以后生成的 ...

  4. ansible安装(批量执行命令

    rpm安装 下载epl源 :  Download the latest epel-release rpm from:http://dl.fedoraproject.org/pub/epel/6/x86 ...

  5. Linux命令(1):cd命令

    1.作用:改变工作目录: 2.格式:cd  [路径]  其中的路径为要改变的工作目录,可为相对路径或绝对路径 3.使用实例:[root@www uclinux]# cd /home/yourname/ ...

  6. 让.NET程序会说话

    在开发过程中需要用到让程序自动播放语音,如果是一个一个录则太麻烦了,在开发过程中发现.NET已经自带了该功能 Type type = Type.GetTypeFromProgID("SAPI ...

  7. OC3_歌词解析

    // // LrcManager.h // OC3_歌词解析 // // Created by zhangxueming on 15/6/15. // Copyright (c) 2015年 zhan ...

  8. 4月8日学习笔记(js基础)

    <script>标签放在<body>和<head> 放在 <head></head> 里的会比放在 <body></bod ...

  9. poj 3616 Milking Time

                                                                                                 Milking ...

  10. Contiki学习入门之概览

    Contiki是专为物联网领域而设计的开源操作系统,适用于联网嵌入式系统和无线传感器网络.由瑞典计算机科学学院的Adam Dunkels团队开发.它有以下几个特点. 1. 网络标准 contiki提供 ...