IE下点击scrollbar会导致焦点移动到body
来源:互联网 发布:淘宝diy u盘好 编辑:程序博客网 时间:2024/05/18 21:50
现象
IE这货果然与众不同,当光标焦点在input时,点击同页面内其他区域的scrollbar,会导致焦点移动到body,从而触发绑定在input上的blur事件,如果input中的值与之前不同,甚至还会触发change事件... Chrome曾经也有类似的问题,但在最新版中已经修正了,而Firefox则完全没有这样的问题。
影响
这个问题看起来微不足道,实际上影响还是非常大的,主要表现在下面2个方面
多数的suggest控件会出错
suggest往往是通过input(输入部分)和div(下拉框部分)组成。有时,下拉框内容过多,用户需要移动滚动条才能看全选项,但因为点击滚动条会让input失去焦点,导致控件误认为用户结束输入,从而关闭suggest的下拉部分,导致用户实际上无法正确的进行滚动条操作。form
这个更容易理解了,一般来说form的验证都是绑定在blur或者change事件上,如果form太长,需要移动滚动条才能看全的情况下,一旦鼠标点击滚动条就会错误的触发form验证操作,将无用的错误信息显示给用户。
解决方案
我们来看看jQueryUI的Autocomplete是怎么解决这个问题的。
这下就很清楚了,要处理这个问题,要点有两个:
- 通过自定义的flag判断是否需要跳过(直接return)input的blur事件
- 全局(document)监视下一次mousedown事件,如果不是特定区域才执行blur相关操作
<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- IE下点击scrollbar会导致焦点移动到body
- artdialog在ie下点击关闭会嵌入到页面中的解决办法
- ie scrollbar
- surfaceview在fragment中切换回来后会失去焦点,导致点击事件需要第二次才能生效
- PHP动态加载html文件之后<head>中内容全部移动到<body>中导致页面头部存在空白
- 如果父元素都没有设有移动定位属性,则元素会参照 <html>来定位,而不是<body>,IE、FF都如此
- 点击button标签会导致提交form
- IE下更改JS confirm 焦点
- body 滚动条scrollbar的样式设置
- 关于listView的item失去焦点不能点击 Item中包含Button 导致抢占焦点
- 关于listView的item失去焦点不能点击 Item中包含Button 导致抢占焦点
- HTML焦点移动到图片上,图片位置发生移动
- body下last-child偶尔会失效的真实原因
- 点击通知栏图标、桌面图标会导致应用重启
- TextView误用"inputType"属性会导致点击事件失效!
- 什么情况下会导致内存泄露
- 什么情况下会导致内存泄露
- 什么情况下会导致内存泄露
- java的Calendar时间类
- <Java编程思想> 初始化与清理
- HDU2830-----DP最大子矩阵系列
- void* memchr( void *pv, unsigned char ch, size_t size )
- 交叉编译GDB7.6
- IE下点击scrollbar会导致焦点移动到body
- CSDN一月使用感受
- NULL值的总结
- 用2个数字输出你想要的汉字
- ios开发切换页面特效
- 写给明天的软件工程师——感悟篇
- 获得LayoutInflater实例的三种方式
- 多版本Python共存[支持使用pip安装包]
- hdu play on words(大神写的)