现象描述：
对于combo组件以及依赖combo组件的combobox,combotree,combogrid等组件都有这个功能：在控件所在区域之外页面任意处按下鼠标时，控件的下拉面板会自动隐藏，问题是虽然下拉面板被隐藏了，但是却没有触发onHidePanel事件，为什么没有触发，我们对源码稍作分析就知道了。
原因分析：
combo组件其实是在document上委托了事件处理程序，我们来看代码片段:
- $(document).unbind(".combo").bind("mousedown.combo", function(e) {
- var panels = $("body>div.combo-p>div.combo-panel");
- var p = $(e.target).closest("div.combo-panel", panels);
- if(p.length) {
- //如果mousedown事件发生在下拉面板内,则不做任何操作
- return;
- }
- //关闭面板
- panels.panel("close");
- });
很明显combo在document上委托了mousedown事件处理程序，命名控件为"combo"，事件处理程序内部会关闭下拉面板，而关闭面板的时候使用的是panel组件的close方法，panel组件的close方法并不会触发onHidePanel事件，整个源代码触发onHidePanel事件的地方只有一个：
- /**
- * 内部隐藏下拉面板的接口，这个没什么可说的，预留了一个onHidePanel事件接口
- */
- function hidePanel(target) {
- var opts = $.data(target, "combo").options;
- var panel = $.data(target, "combo").panel;
- panel.panel("close");
- opts.onHidePanel.call(target);
- };
解决方案：
分析到这里已经很清楚为什么这种情况不会触发onHidePanel事件了。那么我们要想触发该事件怎么办呢？其实很简单，在combo组件实例化完成后，我们通过给下拉面板的panel组件注册onClose事件，也就是用panel组件的onClose事件代替combo组件的onHidePanel事件：
- $('comboId').combobox('panel').panel({
- onClose:function(){
- //TODO
- }
- })
管理员 世纪之光 : 2013年05月23日17:40:42 地下1层