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

　　这两天使用javascript的一个日历控件ＣbsCalendar.js，有一个缺点就是不能使用单击某一区域关闭。郁闷中。于是就改了一下。下面是加的代码，兼容IE与firfox
主要修改如下：
1、CbsCalendar.js右上角关闭按钮是个“X”，而不是汉字，这里改成了“关闭”。
２、以前单击“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属性，我想这个要求不过分。
还有一个问题没有解决，就是在使用ie６时，控件被select覆盖。
本js文件在附件中，用法为<input type="text" id="cal" onclick="new CbsCalendar(this.id)" />

评论

2 楼 mewleo 2009-06-19  

1 楼 mewleo 2009-06-19  

han2000lei 写道

还有一个问题没有解决，就是在使用ie６时，控件被select覆盖。

这是一个很苦恼的问题，你解决不了可以理解，因为我们都是程序员。

我是请教了一个美工之后才解决这个问题的。

他是html的docment声明版本引起的，明天一起研究一下。