IE下点击scrollbar会导致焦点移动到body

付永刚发布于2019-08-19 17:30 / 3017人阅读

摘要：现象这货果然与众不同，当光标焦点在时，点击同页面内其他区域的，会导致焦点移动到，从而触发绑定在上的事件，如果中的值与之前不同，甚至还会触发事件曾经也有类似的问题，但在最新版中已经修正了，而则完全没有这样的问题。

现象

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

</>复制代码 
// 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相关操作

云服务器 GPU云服务器什么原因会导致云计算故障 js点击焦点图切换 jsp移动焦点的事件 html点击会隐藏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78584.html

前端常用样式总结

摘要：本文全部使用内容高度不够时，依然显示到最下面大概有这样的结构布局查看下面的不需要查看不定宽高的垂直水平居中首先，兼容性也不错可以，不想用时可以用垂直水平居中居中本文全部使用 scss + autoprefixerBrower support: flex box(IE 10+), :before & :after IE 8+(IE8 only supports the single-c...

phodal 2019-08-30 13:02 评论0 收藏0
css scrollbar样式设置

摘要：表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。一前言在CSS 中，如果我们在块级容器上设置了属性: overflow:scroll /* x y 方向都会*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 当块级内容区域...

104828720 2019-08-01 18:23 评论0 收藏0
css scrollbar样式设置

摘要：表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。一前言在CSS 中，如果我们在块级容器上设置了属性: overflow:scroll /* x y 方向都会*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 当块级内容区域...

张春雷 2019-08-29 14:13 评论0 收藏0
#JavaScript # javascript DOM0和DOM2事件

摘要：端的是点击，但是移动端把事件当作单击。移动端的是点击事件不是端的点击效果，存在的延迟，项目中我们需要解决这个延迟，使用手指离开处理点击事件。什么是事件事件是元素天生具备的行为方式（和写不写JS代码没有关系），当我们去操作元素的时候会触发元素的很多事件。事件绑定 1.什么是事件绑定给当前元素的某一个事件绑定方法，目的是为了让当前元素某个事件被触发时，可以做一些事情。2.事件绑定方...

Salamander 2019-08-23 17:18 评论0 收藏0
H5项目常见问题汇总及解决方案

摘要：解决方案可以解决在手机上点击事件的延迟的模块，事件也是为了解决在的延迟问题显示屏原理及设计方案说明屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由个变为多个，如在同样带下的屏幕上，苹果设备的显示屏中，像素点个变为个。原文链接 - https://github.com/FrontEndRo... H5项目常见问题及注意事项 Meta基础知识： H5页面窗口自动调整到设备...

marser 2019-08-20 14:08 评论0 收藏0