焦点的应用

					焦点的应用

开发工具与关键技术：Visual Studio 2015   聚焦与失去焦点

作者：廖 茂

撰写时间：2019年07月01日

关于焦点这一东西，用的地方不多，不过不要以为用的不多就可以不理，在有些时候焦点很重要，有一些功能需要利用焦点来实现，在这里，我们以一个选择地点的功能为例，详细说明一下焦点的用处，首先来看一下页面样式，如下：

给出发城市绑定一个城市选择的选项卡，点击输入框，选项卡就会弹出，当不选择城市而用鼠标点击其他地方时，选项卡就会关闭，这些操作就需要利用焦点来实现，选项卡的制作就不说了，主要说明一下功能代码，首先来看一下点击输入框弹出选项卡的功能代码，如下：

用Jquery语句，通过输入框的ID绑定点击事件，点击输入框，就会把选择城市的选项卡显示出来，diseled为存放选项卡的变量，由于考虑到点击其他地方，选项卡失去焦点，选项卡会隐藏；不选择城市且再次点击输入框，选项卡会隐藏；选择完城市后，选项卡也会隐藏。也就是说，有三个因素会让选项卡隐藏，代码如下：

第一个就是点击其他地方导致选项卡隐藏的方法，“blur”就是元素失去焦点时发生的事件；第二个是当鼠标再次点击，选项卡会隐藏的方法，“keydown”就是鼠标再次点击的事件；第三个就是选择了城市之后，选项卡会隐藏的方法，“.linkdhu”是所有包含城市的标签的类，通过类名绑定点击事件。当然，第三个方法不可能是选择完城市把选项卡关闭就可以了的，还需要把选择到的城市回填到输入框中，如下：

通过类名绑定点击事件，把选择到的标签的文本赋值给输入框，这样选项卡的显示和选项卡隐藏的因素的方法就写好了，接下来编写聚焦和失去焦点的方法，首先声明两个对象分别用来记录焦点元素和记录状态，如下：

然后编写输入框聚焦事件，如下：

首先通过输入框的父元素的ID找到输入框的类名，当输入框获取到焦点时，发生“focus”事件，然后创建一个对象存放城市选择选项卡，然后通过this引用前面创建的对象，通过“parent”方法获取到最外层的父元素，然后用“append”方法给最外层的父元素添加上城市选择选项卡，接着设置选项卡的display属性让选项卡显示并且设置定位，因为选项卡的默认位置不太好，所以需要设置一下，最后记录一下元素this，也就是diseled对象，在设置记录状态为false，聚焦的方法就写完了，接下来看一下失去焦点的方法，如下：

开始和聚焦一样，都是通过输入框的父元素的ID找到输入框的类名，当失去焦点时，发生“focusout”事件，然后在方法里面创建一个对象，获取到选项卡，接着判断如果状态不为“isMouseOver”，也就是不为“false”，最后把选项卡隐藏。失去焦点的方法就是这样。这样还没完，让输入框聚焦和失去焦点肯定需要鼠标进行点击的操作，如下：

第一个是鼠标进入事件，当鼠标进入选项卡时，状态设置为true，第二个是鼠标离开事件，当鼠标离开选项卡范围时，状态设置为false，第三个就是点击选择城市时，焦点设置为选中的城市，最后把选项卡隐藏。

焦点在这里的的用处就是通过焦点的改变来决定选项卡的显示和隐藏。