在web前端开发过程中，可能需要开发一个下拉菜单。为了提升用户体验，可能需要在鼠标点击下拉菜单以外的空白处时，该下拉菜单隐藏。为了解决这个问题，有几种实现，笔者将对此分别说明，并给出自己的解决方案。
工具/原料
javascript
方法/步骤
1
需求描述:1.点开下图中的更多后，弹出下拉菜单，用户点击下拉菜单每一项后，“全部分类处”会变成选中的那一项，比如选中了“分类1”，则红圈部分则显示为“分类1”
2
2.用户在搜索框输入关键字后，可以点击右边的搜索图标，然后根据用户选择的项，为用户展现搜索结果3.用户点击下拉框的任意一项后，下拉框消失；鼠标点击页面其他空白处时，该下拉框消失
3
常用解决方法1.给下拉框每项赋予oclick方法，点击后隐藏下拉框2.给当前window添加一个onclick方法，在该方法里，判断点击的事件源是否位于该下拉框组件内，判断的方法可以通过该组件的class属性来判断
4
常用解决方法的总结与问题：通过给window添加onclick方法可以很好的解决功能需求问题：1.该功能组件的功能涉及到window对象，不利于扩展2.如果当前界面上有多个下拉框对象时，会出现问题3.为了便于扩展，有必要将该功能需求锁定在该组件范围内
6
通过分析发现，该问题是有由于onblur与onclick运行冲突所导致，在该实现中，是由于onblur先触发，导致onclick失效。为了解决这个问题，我们可以考虑将onblur进行改写，以符合我们的要求。我的解决方案是通过给onblur设置一个判断条件，在满足一定条件时触发否则返回false不触发。代码如下:
注意事项
上述代码用伪代码的形式描述了解决onclick和onblur冲突的问题（贴代码会出现样式混乱，不利于查看，故采用图片形式），只是提供了一种解决方法，不能直接运行，请根据自己的应用环境进行更改。
上一篇：web前端面试应该准备和注意什么
下一篇：面试jQuery常遇到的问题