单击其它区域关闭日历控件(兼容firfox与IE)

  这两天使用javascript的一个日历控件CbsCalendar.js,有一个缺点就是不能使用单击某一区域关闭。郁闷中。于是就改了一下。下面是加的代码,兼容IE与firfox
主要修改如下:
1、CbsCalendar.js右上角关闭按钮是个“X”,而不是汉字,这里改成了“关闭”。
2、以前单击“X”时,是选文体的那种符号,而不是小手(链接)的形式,非常别扭,现在改成了小手的形式。(在代码中本来设计者设计的是小手的形式,但由于多写了一个字母导致了小手没有出现)
3、修改了单击外部不能关闭控件的问题(以前只能单击关闭按钮才能关闭控件,现在单击文本中的其它区域就可以关闭控件了)
//*****************单击其它地方关掉
  var active = false;
  var C_div = document.getElementById(this._id+"divCalendar").getElementsByTagName("div");
    var flag = false;
    if(window.addEventListener){//判断浏览器,flag=true为firfox,false为IE
        flag = true;
    }
    for (var i=0;i<C_div.length;i++){
        if(flag){
            C_div[i].addEventListener("mouseover",function(){active = true;},false);
            C_div[i].addEventListener("mouseout",function(){active = false;},false);
        }else{
            C_div[i].attachEvent("onmouseover",function(){active = true;});
            C_div[i].attachEvent("onmouseout",function(){active = false;});
        }
    }
    if(flag){
        document.addEventListener("click",hide,false);
    }else{
        document.attachEvent("onclick",hide);
    }
  function hide(e){
      var evg=e.srcElement?e.srcElement:e.target;//srcElement适应于IE,target适应于firfox
	if (active == false &&document.getElementById(div._id + "divCalendar").style.display!="none" && evg.getAttribute("type")!="text")//这个地方需要注意一下,如果程序员在使用<input >时,如果不加type属性,在firfox会出问题,因为如果没有type属性,evg.getAttribute("type")在firfox中为null,有哪位高手可以解决一下这个问题?
	  document.getElementById(div._id + "divCalendar").style.display = "none";
  }
//*****************结束

有两个问题:
一是我没有考虑旁边按钮的用法,只考虑了在文本框中单击时的用法。
二是ie与firfox的问题。本日历控件已经完全兼容这两种浏览器。但要注意:程序员使用文本框时,input的标记中必须有type属性,(虽然一般程序员都会写上,但不敢保重一些懒人的做法)两种浏览器如果不写type="text",都会默认为"text",在前端显示为文本框,但在取type这个属性的值时,IE中可以取到,firfox中是取不到的。为了保重效果,程序员一定要在input中使用type属性,我想这个要求不过分。
还有一个问题没有解决,就是在使用ie6时,控件被select覆盖。
本js文件在附件中,用法为 <input type="text" id="cal" onclick="new CbsCalendar(this.id)" />

你可能感兴趣的:(JavaScript,html,浏览器,IE,idea)