下拉树列表菜单选择器（2）

主要是对前面版本中JS代码的一些修改

//在createTree的版本上加入了一个初始化检测变量initial
//初始化主要是指初始化相关组件应绑定的事件
//一旦初始化完这些事件后在后续的操作中就不再初始化相关的事件
//这样保证了事件激活的连续性
function createTree2(component){
    if(!component.initial){
        
        //component设置blur属性
        //主要用来与其他条件一起检测是否应该隐藏树目录
        //因为如果只是单纯的在select发生onblur事件时就隐藏树目录
        //会发生BUG
        component.blur = false;
        
        component.addEventListener("blur",function(){
            this.blur = true;
        });
        
        //获得目录列表，其中每两个标签之间有一个文本节点，所以select的父节点有5个子节点
        //而包含列表的div是第四个节点
        var parent = component.parentNode;
        component.treeMenu = parent.getElementsByTagName("div")[0];
        component.treeMenu.addEventListener("mouseout",function(){
            component.blur = true;
        });
        
        //点击select时，列表是展开的就收缩列表，否则就展开列表
        if(component.treeMenu.style.display === "none"){
            component.treeMenu.style.display = "";
            console.log("display");
        }else{
            component.treeMenu.style.display = "none";
            console.log("select hidden");
        }
        
        //获得每一个目录的li，如果li下还有子目录，那么将li加一个"haschildren"属性
        //并且将且加入li的children中
        //并且将子目录隐藏
        component.treeMenu.menuLis = component.treeMenu.getElementsByTagName("li");
        for(var i=0;i<component.treeMenu.menuLis.length;i++){
            var menuLi = component.treeMenu.menuLis[i];
            var childLists = menuLi.getElementsByTagName("ul");
            menuLi.hasChildren = false;
            if(childLists.length>0){
                menuLi.hasChildren = true;
                for(var j=0;j<childLists.length;j++){
                    childLists[j].style.display = "none";
                }
                menuLi.childrenMenu = childLists;
            }
        }
        
        //获得每一个目录的link,并且给每一个link都绑定一个事件
        //当该目录被选中时，就给select插入一个option，并且选中该option
        //并且将该option设置为隐藏的，这样就设置了select的值
        var menuLinks = component.treeMenu.getElementsByTagName("a");
        //console.log(menuLinks[0].innerHTML);
        for(var i=0;i<menuLinks.length;i++){
            //console.log(menuLinks[i].innerHTML);
           menuLinks[i].addEventListener("click",function(){
               console.log("Link is clicked");
                var parentNode = this.parentNode;
                //var childLists = parentNode.getElementsByTagName("ul");
                if(parentNode.hasChildren){
                    component.blur = false;
                    for(var i=0;i<parentNode.childrenMenu.length;i++){
                        if(parentNode.childrenMenu[i].style.display === "none")
                           parentNode.childrenMenu[i].style.display = ""; 
                       else
                           parentNode.childrenMenu[i].style.display = "none"; 
                    }
                }else{
                    var text = this.innerHTML;
                    var option = document.createElement("option");
                    option.text = text;
                    option.selected = true;
                    option.style.display = "none";
                    component.add(option,null);
                    component.treeMenu.style.display = "none";
                    component.blur = true;
                    console.log("link hidden");
                }
            });
        }
        
        //给body绑定一个点击事件，这个事件用于检测鼠标是否在下拉树列表外进行了点击
        //如果是，则要隐藏下拉树，相当于下拉树列表失去了焦点
        //判断的方法是根据发生点击事件是鼠标的位置
        document.body.addEventListener("click",function(event){
            console.log("body is clicked");
                if(component.treeMenu.style.display !== "none"){
                    /*console.log("top: "+treeMenu.offsetTop+" left: "+treeMenu.offsetLeft+
                            " height: "+treeMenu.offsetHeight+" width: "+treeMenu.offsetWidth);
                    console.log("eventX: "+event.clientX+" eventY: "+event.clientY);
                    console.log(event.type);*/
                    if((event.clientX<component.treeMenu.offsetLeft ||
                       event.clientX>(component.treeMenu.offsetLeft+component.treeMenu.offsetWidth) ||
                       event.clientY<component.treeMenu.offsetTop ||
                       event.clientY>(component.treeMenu.offsetTop+component.treeMenu.offsetHeight))
                       && component.blur){
                       component.treeMenu.style.display = "none";
                       console.log("body hidden");
                    }
                }
        });

        //给window绑定事件隐藏目录
        //因为body并不一定能覆盖完整个浏览器窗口
        //检测点击是否发生在body之外，如果是，就应该隐藏目录
        //依然要检测select的blur属性，不然会有一个小bug
        //在select边缘点击的时候，如果不检测select blur属性，会触发目录隐藏
        window.addEventListener("click",function(event){
           console.log("window is clicked"); 
           //console.log(event.clientY);
           if((event.clientX<document.body.offsetLeft ||
                   event.clientX>(document.body.offsetLeft+document.body.offsetWidth) ||
                   event.clientY<document.body.offsetTop ||
                   event.clientY>(document.body.offsetTop+document.body.offsetHeight))
                   && component.blur)
               if(component.treeMenu.style.display !== "none"){
                   component.treeMenu.style.display = "none";
                   console.log("widow hidden");
               }
        });
        
        component.initial = true;
    }else{
        //点击select时，列表是展开的就收缩列表，否则就展开列表
        component.blur = false;
        if(component.treeMenu.style.display === "none"){
            component.treeMenu.style.display = "";
            console.log("display");
        }else{
            component.treeMenu.style.display = "none";
            console.log("select hidden");
        }
    }
}