关于点击任意处关闭某个控件的javascript的疑惑

最近在做项目时，发现一个奇怪的问题，就是如果某个页面有两个控件，比如日期控件和人员选择树控件，这两个控件都采用javascript中点击任意处关闭的事件，结果发现当两个控件都打开后，先关闭其中一个，后一个点击任意处将不能关闭。

 

关闭树的代码如下：

//任意点击时，调用一个方法
document.onclick=doc_onclicks;
function doc_onclicks(){//当树控件展示时，关闭它

if (document.all.project_type_tree.style.display!="none"){
  with(window.event){
if(srcElement.tagName!='SPAN' && srcElement.tagName!='IMG')        {
        if(document.activeElement!=document.all.selectTypeByImg && srcElement.type!='checkbox'){
                     closeTree();
             }
         }
     }
    }
}

关闭日期控件的代码如下：

document.onclick = function(e) { //任意点击时关闭该控件 ,兼容了FF和IE

            e = window.event || e;
            var srcElement = e.srcElement || e.target;
            if(button!=null){
                if(srcElement != button && srcElement.getAttribute("extatt") == null){
                    showAllSelect();
                    dd.hide();
                }
            }else{
                if(srcElement != th && srcElement.getAttribute("extatt") == null){
                    showAllSelect();
                    dd.hide();
                }
            }
        }
        
    }

分析了代码,原因可能与document.onclick上注册的事件是同一个，即第一个控件触发了

关闭事件后，第二个控件调用的关闭事件仍然是前面的那个，所以无法关闭当前的控件。

 

解决办法：

其中一个控件重新注册事件：

代码如下：

 

 

document.body.attachEvent('onclick',doc_onclick);
function doc_onclick(){//当树控件展示时，关闭它

    if (document.all.project_type_tree.style.display!="none"){
     with(window.event){
         if(srcElement.tagName!='SPAN' && srcElement.tagName!='IMG'){
             if(document.activeElement!=document.all.selectTypeByImg && srcElement.type!='checkbox'){
                     closeTree();
             }
         }
     }
    }
}