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

//在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");
}
}
}