兼容IE/FF的类title提示效果

昨天帮经典一位朋友解决了一个js的问题，但今天看一位网友回帖让偶郁闷了半天。“ 3楼的在Firefox里啥也没有”，偶打开ff测试了下，果然是没有任何反映，看来标准上的问题以后要多多注意了。出现了好几次这样的问题了。
原来楼主的问题时实现一种模拟title的一种很漂亮的效果，昨天下午偶花了半天功夫搞定了，代码如下：

< html >
< head >
   < title ></ title >
   < style  type ="text/css" >
    * {
      font-size : 9pt ;
      margin : 0px ; padding : 0px ;
     }

    #tips {
        position : absolute ; display : none ;
        background : #FF6633 ; width : 250px ;
        border : 1px solid #000 ; color : #fff
     }

    #title {
      background : #333 ; padding : 0px 3px ;
      height : 20px ; line-height : 20px ;
      text-align : right ; font-weight : bold ;
     }
    #content {
      height :  20px ;
      padding : 2px ;
     }
   </ style >
   < script  type ="text/javascript" >
     function  addEvent(elm, evType, fn, useCapture){
         if  (elm.addEventListener){
            elm.addEventListener(evType, fn, useCapture);
             return   true ;
        }  else   if  (elm.attachEvent){
             var  r  =  elm.attachEvent( " on " + evType, fn);
             return  r;
        }  else  {
            alert( " Handler could not be removed " );
        }
    }

     function  linkTitle(){
         if ( ! document.getElementsByTagName)  return  ;
         var  anchors = document.getElementsByTagName( " a " );
         for ( var  i = 0 ;i < anchors.length;i ++ ){
            anchor = anchors[i];
             if (anchor.getAttribute( " tip " )){
                addEvent(anchor, " mouseover " ,linkMouseOver);
                addEvent(anchor, " mouseout " ,linkMouseOut);
            }
        }
    }

     function  linkMouseOver(){
         var  title = document.getElementById( " tips " );
        title.style.top = event.y;
        title.style.left = event.x;
        title.style.display = " block " ;
        document.getElementById( " title " ).innerHTML = event.srcElement.getAttribute( " tip " ).split( " : " )[ 0 ];
        document.getElementById( " content " ).innerHTML = event.srcElement.getAttribute( " tip " ).split( " : " )[ 1 ];
    }
     function  linkMouseOut(){
        document.getElementById( " tips " ).style.display = " none " ;
    }
   </ script >
</ head >

< body >
< div  id ="tips" >
< div  id ="title" ></ div >
< div  id ="content" ></ div >
</ div >
< div  style ="display:block" >
< a  href ="#"  tip ="标题一:内容一在这里" > link1 </ a >< br  />
< a  href ="#"  tip ="标题二:内容二在这里" > link2 </ a >< br  />
< a  href ="#" > link3 </ a >< br  />
< a  href ="#" > link4 </ a >< br  />
< a  href ="#" > link5 </ a >< br  />
< a  href ="#" > link6 </ a >< br  />
< a  href ="#" > link7 </ a >< br  />
</ div >
< script  type ="text/javascript" >
linkTitle();
</ script >
</ body >
</ html >

在ie下测试没有任何问题，实现了楼主需要的效果。但在ff下就是没有任何的效果。愤怒之下在网上寻找关于ie与ff在js上的区别。终于解决了问题。总结如下：
1， W3C（ff）不支持windows.event，在ie下window.event作为一个全局变量，任何时刻都可以直接访问，如event.srcElement,event.x,等，但在ff下必须要定义event事件，方法如下：

function  getEvent(evt){
     ev = evt || window.event；
// 在ie下由于获取不到evt的内容所以将window.event赋给ev，在ff下，浏览器可以通过外部参数evt获取evt，因此将evt赋给ev
 }

这样就可以ev变量使用event事件了。
2，W3C(ff)的event不存在srcElement属性，等同于srcElement的属性为target,因此在ff下要用event.target代替ie下的event.srcElement。
3，在ie下获取鼠标的相对于窗体坐标用event.x/event.y,event.clientX/event.clientY,而在ff下用event.pageX/event.pageY.
4,在ff下为xx.style.top和xx.style.left赋值必须要加上px单位，如xx.style.top=a+"px";否则不能正常显示。在ie下则可以省略px。

综合以上四点，偶修改了自己的代码，终于在ff下也显示出相同效果了。代码如下：

< html >
< head >
   < title ></ title >
   < style  type ="text/css" >
    * {
      font-size : 9pt ;
      margin : 0px ; padding : 0px ;
     }

    #tips {
        position : absolute ; display : none ;
        background : #FF6633 ; width : 250px ;
        border : 1px solid #000 ; color : #fff
     }

    #title {
      background : #333 ; padding : 0px 3px ;
      height : 20px ; line-height : 20px ;
      text-align : right ; font-weight : bold ;
     }
    #content {
      height :  20px ;
      padding : 2px ;
     }
   </ style >
   < script  type ="text/javascript" >
     function  addEvent(elm, evType, fn, useCapture){
         if  (elm.addEventListener){
            elm.addEventListener(evType, fn, useCapture);
             return   true ;
        }  else   if  (elm.attachEvent){
             var  r  =  elm.attachEvent( " on " + evType, fn);
             return  r;
        }  else  {
            alert( " Handler could not be removed " );
        }
    }

     function  linkTitle(){
         if ( ! document.getElementsByTagName)  return  ;
         var  anchors = document.getElementsByTagName( " a " );
         for ( var  i = 0 ;i < anchors.length;i ++ ){
            anchor = anchors[i];
             if (anchor.getAttribute( " tip " )){
                addEvent(anchor, " mouseover " ,linkMouseOver);
                addEvent(anchor, " mouseout " ,linkMouseOut);
            }
        }
    }

     function  linkMouseOver(ev){
         var  ev = ev || window.event;
         var  title = document.getElementById( " tips " );
        title.style.top = (ev.clientY || ev.pageY) + " px " ;
        title.style.left = (ev.clientX || ev.pageX) + " px " ;
        title.style.display = " block " ;
        document.getElementById( " title " ).innerHTML = (ev.srcElement || ev.target).getAttribute( " tip " ).split( " : " )[ 0 ];
        document.getElementById( " content " ).innerHTML = (ev.srcElement || ev.target).getAttribute( " tip " ).split( " : " )[ 1 ];
    }
     function  linkMouseOut(){
        document.getElementById( " tips " ).style.display = " none " ;
    }
   </ script >
</ head >

< body >
< div  id ="tips" >
< div  id ="title" ></ div >
< div  id ="content" ></ div >
</ div >
< div  style ="display:block" >
< a  href ="#"  tip ="标题一:内容一在这里" > link1 </ a >< br  />
< a  href ="#"  tip ="标题二:内容二在这里" > link2 </ a >< br  />
< a  href ="#" > link3 </ a >< br  />
< a  href ="#" > link4 </ a >< br  />
< a  href ="#" > link5 </ a >< br  />
< a  href ="#" > link6 </ a >< br  />
< a  href ="#" > link7 </ a >< br  />
</ div >
< script  type ="text/javascript" >
linkTitle();
</ script >
</ body >
</ html >