js模拟SECLECT，用于自定义SELECT样式，遇到个问题，帮看看
遇到的问题是：我要点击下拉菜单中的值后，隐藏下来菜单，问题出在这里：
- JScript code
VVG.DOM.bindEvent(li,"click",function(event){ var target = event.target || event.srcElement; iId.value = target.innerHTML; //alert(ul.innerHTML); ul.style.display = "none";//这里已经隐藏了，但是怎么没有起作用呢？？？？ }); 全部代码如下：
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>下拉菜单样式模拟，模拟下拉菜单</title><style type="text/css">*{margin:0;padding:0;}#warper{ margin:20px; position:relative;}#warper ul{list-style:none; margin: 0; padding:0;}#warper ul li{line-height:20px; cursor:pointer; margin:1px 0; font-size:12px; text-indent:5px;}.inputbox{width:128px; height:23px; line-height:23px; background: #ccc url(http://img.allinbuy.cn/WebResources/WSTL/Images/shopping/point/slt.gif) no-repeat; border:none; font-size:12px; text-indent:5px;}</style></head><body><div id="warper"> <select name="" id="select" style="display:none;"> <option value="北京" selected>北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> <option value="成都">成都</option> <option value="杭州">杭州</option> <option value="南京">南京</option> </select> <input type="text" id="input" class="inputbox" value="北京" disabled /> </div><script type="text/javascript">var VVG = {};VVG.DOM = {};VVG.DOM.bindEvent = function(element,type,func){ if(element.addEventListener){ element.addEventListener(type,func,false); //false 表示冒泡 }else if(element.attachEvent){ element.attachEvent("on"+type,func) }else{ element["on"+ type] = func; }};VVG.DOM.unbindEvent = function(element,type,func){ if(element.removeEventListener){ element.removeEventListener(type,func,false); }else if(element.detachEvent){ element.detachEvent("on"+type,func); }else{ element["on"+type] = null; }};VVG.Selector = function(o){ this.selectId = o.selectId; this.inputId = o.inputId; this.warperId = o.warperId;}VVG.Selector.prototype = { checkArguments : function(){ if(this.selectId&&this.inputId&&this.warperId){ return true; }else{ alert("传入的ID参数为空或者格式不正确！"); return false; } }, createUl : function(){ if(this.checkArguments()){ var sId = document.getElementById(this.selectId); var iId = document.getElementById(this.inputId); var iIdWidth = iId.offsetWidth; var iIdHeight = iId.offsetHeight; // console.log(iIdWidth + " " + iIdHeight); var wId = document.getElementById(this.warperId); var sArr = []; var options = sId.getElementsByTagName("option"); var ul = document.createElement("ul"); for(var i = 0, n = options.length; i<n;i++){ var li = document.createElement("li"); li.innerHTML = options[i].value; VVG.DOM.bindEvent(li,"mouseover",function(event){ var target = event.target || event.srcElement; target.style.backgroundColor = "blue"; target.style.color = "#fff"; }); VVG.DOM.bindEvent(li,"mouseout",function(event){ var target = event.target || event.srcElement; target.setAttribute("style",""); //若只设此处对IE6无效 target.removeAttribute("style"); //若只设此处则对谷歌浏览器无效，很奇怪啊 }); VVG.DOM.bindEvent(li,"click",function(event){ var target = event.target || event.srcElement; iId.value = target.innerHTML; //alert(ul.innerHTML); ul.style.display = "none"; }); ul.appendChild(li); } wId.appendChild(ul); var cssStr = "display:none;position:absolute;width:"+ (iIdWidth-2) + "px;left:0;top:"+iIdHeight+"px;border:1px solid #ccc;"; ul.style.cssText = cssStr; VVG.DOM.bindEvent(wId,"click", function(){ ul.style.display = "block"; }); } }}var selector1 = new VVG.Selector({ selectId:"select", inputId:"input", warperId:"warper"})selector1.createUl();</script></body></html>
[解决办法]
ul.style.display = "none"; //ul哪里来的，不是全局变量吧
[解决办法]
记得 return false 就能防止冒泡。。