现象

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是怎么解决这个问题的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// input's blur event
blur: function( event ) {
if ( this.cancelBlur ) {
delete this.cancelBlur;
return;
} clearTimeout( this.searching );
this.close( event );
this._change( event );
} // dropdown's mousedown event
mousedown: function( event ) {
// prevent moving focus out of the text field
event.preventDefault(); // IE doesn't prevent moving focus even with event.preventDefault()
// so we set a flag to know when we should ignore the blur event
this.cancelBlur = true;
this._delay(function() {
delete this.cancelBlur;
}); // clicking on the scrollbar causes focus to shift to the body
// but we can't detect a mouseup or a click immediately afterward
// so we have to track the next mousedown and close the menu if
// the user clicks somewhere outside of the autocomplete
var menuElement = this.menu.element[ 0 ];
if ( !$( event.target ).closest( ".ui-menu-item" ).length ) {
this._delay(function() {
var that = this;
this.document.one( "mousedown", function( event ) {
if ( event.target !== that.element[ 0 ] &&
event.target !== menuElement &&
!$.contains( menuElement, event.target ) ) {
that.close();
}
});
});
}
}

这下就很清楚了,要处理这个问题,要点有两个:

  • 通过自定义的flag判断是否需要跳过(直接return)input的blur事件
  • 全局(document)监视下一次mousedown事件,如果不是特定区域才执行blur相关操作

IE下点击scrollbar会导致焦点移动到body的更多相关文章

  1. nginx负载下站点错误响应会导致其他节点重复响应问题的解决过程

    目录 前言 问题来了 问题又来了 问题分析 困惑 转机 后续 前言: 这是我上周工作过程中的一次解决问题的过程.解决的是nginx负载下站点错误响应导致其他节点重复响应. 我在整理这个记叙文时,在给这 ...

  2. 移动web在ios和android下点击元素出现阴影问题

     移动web开发经验总结 1.-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影.备注:transp ...

  3. 空a标签 a标签空的情况下 IE6 IE7下点击无效

    最近做了好多网站专题页面,因为专题页面图片较多,个别banner上有1个到多个按钮,一种是用“图解img标签的usemap”的方法做链接,(图解img标签的usemap使用方法)[传送门] 另一种用则 ...

  4. 火狐浏览器下点击a标签时出现虚线的解决方案

    1.兼容性问题 火狐浏览器下点击a标签时出现虚线 2.解决方案 a:focus { outline: none;}

  5. 安卓下点击a标签不跳转;点击a标签在手机真机上会调出手机键盘的解决办法

    安卓下点击a标签不跳转的解决办法,是不用href做跳转的链接,改为用JS控制跳转 <a href="javascript:;" ontouchstart="wind ...

  6. WIN10环境下点击通知栏图标时自动切换输入法导致图标位置变动

    这个问题由来已久,每当点击系统右下角任务栏中的按钮时,原本是搜狗输入法就会自动变成“US [ 中文(简体,中国) ]”,图标会自动错位,导致响应的是其他功能. 假设上图是正常的环境,此时我点击电池图标 ...

  7. 众神看过来:IE11下鼠标中键(滚轮)导致的一个似乎无法解决的问题?!

    最近在做asp.net mvc项目时遇到一个关于超链接的问题.很是纠结. 问题描述 有一个公司列表展示页.在用鼠标中键(注意了是滚轮)以下简称中键,点击编辑(超链接)的时候在该条数据的下面直接加在一个 ...

  8. android 防止多次点击,它会导致事件侦听响应于其他接口

    这里有情况: A当点击跳转至B介面,点击B接口结束后,到A界面中 1.此时在B界面中,设置点击事件,点击后结束B v.setOnClickListener(new OnClickListener() ...

  9. ios下点击穿透focus获取问题

    在ios下的浏览器中当点击当前页的一个按钮,用window.location.href进行跳转时,如果下一个页面里这点击按钮的位置是一个textarea或者text等那么他会触发focus事件,会出现 ...

随机推荐

  1. ECShop出现Strict Standards: Only variables should be passed by reference in的解决方法

    今天安装ecshop的时候最上面出现了一个错误提示:Strict Standards: Only variables should be passed by reference in F:\www.x ...

  2. IE8以下版本iframe出现滚动条和内容空白问题

    在网页中使用iframe引用了第三方的页面 $("#tianqi").html('<iframesrc="http://i.tianqi.com/index.php ...

  3. 网页JS获取当前地理位置(省市区)

    眼看2014又要过去了,翻翻今年的文章好像没有写几篇,忙真的或许已经不能成为借口了,在忙时间还是有的,就像海绵里的水挤挤总会有滴.真真的原因是没有学习过什么新的技术,工作过程中遇到的问题也不是非常难并 ...

  4. WPF的Timer控件的使用WPF的Timer控件的使用

    通过System.Threaing.Timer控件来实现“初始加载页面时为DataGrid的模版列赋初始值” System.Threaing.Timer的用法: 步骤1: //声明定时器 System ...

  5. 博为iHospital-HIS医院信息系统产品系列

    博为软件iHospital-HIS产品系列式面向大中型医院应用的完整医院流程信息化产品,覆盖了医院主要的业务流程,管理职能,和病人在医院诊疗的各个环节.将医院流程的优化与软件系统完美结合,为建立数字化 ...

  6. Mac下MySQL卸载方法 转载

    mac下mysql的DMG格式安装内有安装文件,却没有卸载文件……很郁闷的事. 网上搜了一下,发现给的方法原来得手动去删. 很多文章记述要删的文件不完整,后来在stackoverflow这里发现了一个 ...

  7. swift 如何删除subviews

    scrollView.subviews.map { (var view) -> () in if (view is UIButton) { view.removeFromSuperview() ...

  8. 关于u-boot中的.balignl 16,0xdeadbeef的理解

    .globl _start  //不占内存_start: b       start_code //占4字节内存 ldr pc, _undefined_instruction //占4字节内存 ldr ...

  9. volley中网络请求

    首先使用Volley类创建 RequestQueue queue = Volley.newRequestQueue(this);  Making GET Requests final String u ...

  10. cocos2d ios 环境搭建

    一.下载cocos2d-x http://cocos2d-x.org/projects/cocos2d-x/wiki/Download cocos2d-x-2.1.4.zip @ June.18, 2 ...