firefox中的事件onmouseover无法触发,请高手帮帮忙.......急

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>兼容性好的TAB选项卡(IE,FF,Opera,Safari,Chrome)</title>
<style type="text/css">
#tab_container1{width:600px;text-align:left;}
.cls_tab_nav{height:26px;overflow:hidden;font-size:12px;text-align:left;background:url(images/line_bg.jpg) repeat-x bottom;}
.cls_tab_nav ul{font-size:9pt;margin:0;padding:0;}
.cls_tab_nav_li{background:url(images/tab_bg.jpg) no-repeat -157px 0;width:157px;height:26px;line-height:26px;float:left;display:inline;overflow:hidden;text-align:center;cursor:pointer;}
.cls_tab_nav_li_first{background-position:0px 0px;}
.cls_tab_nav_li a{text-decoration:none;color:#555;font-size:12px;}
.cls_tab_body{border:1px solid #FFAE1E;border-top:none;min-height:260px;padding:20px;}
.cls_div{display:none;font-size:14px;}/*新添样式*/
.cls_tab_body .cls_div li{list-style:none;  width:203px;padding:5px 0;padding-left:5px;text-align:left;background:#ffffff; word-wrap:break-word;word-break:normal; list-style:none; list-style-image:url(images/li.gif);}
.cls_tab_body .cls_div li.colorful{background:#eeeeee;}
.cls_tab_body .cls_div li.contents{background:#000000;color:#ffffff;display:none;}
.cls_tab_body .cls_div li.hide{display:none;}
.cls_tab_body .cls_div li.show{display:block;}
</style>
</head>
<body>
<div id="tab_container1">
 <div class="cls_tab_nav">
  <ul>
   <li class="cls_tab_nav_li cls_tab_nav_li_first"><a href="/">淘气榜</a></li>
   <li class="cls_tab_nav_li"><a href="/sort/list_1_1.shtml">好评榜</a></li>
   <li class="cls_tab_nav_li"><a href="#">其它</a></li>
  </ul>
 </div>
 <div class="cls_tab_body">
  <div class="cls_div" style="display:block;">tab选项卡</div>
  <div class="cls_div">
   <ul>
<li id='l1' class="colorful">1.美特斯邦威，不走寻常路</li>
<li id='l11' class="contents" ><img src="images/mst.gif" alt="美斯特"/>1.美特斯邦威，不走寻常路美特斯邦威，不走寻常路美特斯邦威，不走寻常路美特斯邦威</li>
<li id='l2' >2.关键时刻，我只信赖诺基亚</li>
<li id='l21' class="contents">2.关键时刻，我只信赖诺基亚关键时刻，我只信赖诺基亚关键时刻，我只信赖诺基亚关键时刻，</li>
<li id='l3' class="colorful">3.DHC妆前平整乳太棒了</li>
<li id='l31' class="contents">3.DHC妆前平整乳太棒了DHC妆前平整乳太棒了DHC妆前平整乳太棒了</li>
<li id='l4'>4.李宁，中国的名族魂</li>
<li id='l41' class="contents">4.李宁，中国的名族魂李宁，中国的名族魂李宁，中国的名族魂</li>
<li id='l5' class="colorful">5.波导手机，手机中的战斗机</li>
<li id='l51' class="contents">5.波导手机，手机中的战斗机波导手机，手机中的战斗波导手机，手机中的战斗波导手机，手机中的战斗三</li>
<li id='l6'>6.王老吉，不是一般的喜欢你</li>
<li id='l61' class="contents">6.王老吉，不是一般的喜欢你王老吉，不是一般的喜欢你王老吉，不是一般的喜欢你王老吉，不是一般的喜欢你</li>
<li id='l7' class="colorful">7.雅芳，我觉得真不错</li>
<li id='l71' class="contents">7.雅芳，我觉得真不错雅芳，我觉得真不错雅芳，我觉得真不错雅芳，我觉得真不错</li>
<li id='l8'>8.不得不赞，移动客服</li>
<li id='l81' class="contents">8.不得不赞，移动客服不得不赞，移动客服不得不赞，移动客服不得不赞，移动客服不得不赞，移动客服</li>
</ul>
  </div>
  <div class="cls_div">其它内容/</div>
 </div>
</div>
<script type="text/javascript">
try
{
  document.execCommand("BackgroundImageCache", false, true);
}
catch(e){}
//获取某个元素对象
function $(element)
{
 if(arguments.length>1)
 {
for(var i=0,elements=[],length=arguments.length;i<length;i++)
elements.push($(arguments[i]));
return elements;
 }
if(typeof element=="string")
{
return document.getElementById(element);
}
  
 else
 {
return element;
 }
  
}
//创建一个函数对象
var Class=
{
 create:function()
 {
  return function()
  {
this.initialize.apply(this,arguments);
  } 
 }
}
//实现对象的继承
Object.extend=function(destination,source)
{
 for(var property in source)
 {
destination[property]=source[property];
 }
  return destination;
}
/*新增方法*/
//为元素添加新的元素的class属性
function hasClass(element, className) 
{ 
    var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
return element.className.match(reg); 
} 
var addClass = function(elem, className) {
if ((" " + elem.className + " ").indexOf(" " + className + " ") == -1) {
if (elem.className == "") {
elem.className = className;
} else {
elem.className += (" " + className);
}
}
};
/*function addClass(element, className)
{ 
    if (!this.hasClass(element, className)) 
{ 
        element.className += " "+className; 
} 
} */
function removeClass(element, className)
{
    if (hasClass(element, className)) 
{
       var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); 
   element.className = element.className.replace(reg,' '); 
} 
} //为某一元素添加事件
var addEvent = function(elem, eventName, handler) {
if (elem.addEventListener) {
elem.addEventListener(eventName, handler, false);
} else if (elem.attachEvent) {
elem.attachEvent("on" + eventName, handler);
}
};
//创建tab选项卡对象
var tabMenu=Class.create();
tabMenu.prototype={
 initialize:function(container,selfOpt,otherOpt){
   this.container=$(container);
    var selfOptions=Object.extend({fontWeight:"bold",fontSize:"12px",color:"#FFBC44"},selfOpt||{});
   var otherOptions=Object.extend({fontWeight:"normal",fontSize:"12px",color:"#666"},otherOpt||{});
  //用for循环得到objs数组,主要是为了兼容非IE浏览器把空白也当作子对象
  for(var i=0,length=this.container.childNodes.length,objs=[];i<length;i++)
  {
   if(this.container.childNodes[i].nodeType==1)
objs.push(this.container.childNodes[i]);
  }
  var tabArray=objs[0].getElementsByTagName("li");
  //用for循环得到divArray数组,主要是为了兼容非IE浏览器把空白也当作子对象
  var divArray=new Array();
  for(i=0,length=objs[1].childNodes.length;i<length;i++)
  {
    if(objs[1].childNodes[i].nodeType==1)
    divArray.push(objs[1].childNodes[i]);
  }
  
  //用for循环得到liArray
  var liArray=objs[1].childNodes[1].getElementsByTagName("li");
  /*var liArray=new Array();
  for(i=0,length=objs[1].childNodes[1].childNodes[0].childNodes.length;i<length;i++)
  {
   if(objs[1].childNodes[1].childNodes[0].childNodes[i].nodeType==1)
{
liArray.push(objs[1].childNodes[1].childNodes[0].childNodes[i]);

}
  }*/
  alert(liArray.length);
 
  for(i=0,length=liArray.length;i<length;i++)
  {
    addEvent(liArray[i],"mouseover",function(){alert("sfsdfsdf")});
   liArray[i].length=length;
liArray[i].index=i;
if(i%2==0)
{
liArray[i].onmouseover=function(e)
{
var thisid=this.id;
var li=document.getElementById(thisid);
var li_color=document.getElementById(thisid+"1");
addClass(li,"hide");
addClass(li_color,"show");



};

liArray[i].onmouseout=function()
{
var thisid=this.id;
var li=document.getElementById(thisid);
var li_color=document.getElementById(thisid+"1");
/*alert(li);
alert(li_color);*/
removeClass(li,"hide");
removeClass(li_color,"show");

}
}
  }  for(i=0,length=tabArray.length;i<length;i++)
  {
   tabArray[i].length=length;
   tabArray[i].index=i;
   tabArray[i].onmouseover=function()
   {
//其它选项卡样式设置
for(var j=0;j<this.length;j++)
{
 tabArray[j].style.backgroundPosition="-"+tabArray[j].offsetWidth+"px 0";
 for(var property in selfOptions)
 {
tabArray[j].firstChild.style[property]=otherOptions[property];
 }
}
//当前选项卡样式
this.style.backgroundPosition="0 0";
for(var property in selfOptions)
{
this.firstChild.style[property]=selfOptions[property];
 /*
  注意this.style.property和selfOptions.property的用法错误
  style.fontWeight正确
  style["fontWeight"]正确
  style["font-weight"]错误
 */
}
//隐藏其它选项卡
for(j=0;j<this.length;j++)
{
divArray[j].style.display="none";
}
//显示当前选项卡
divArray[this.index].style["display"]="block";
    }
   }
   }
}var tab1=new tabMenu("tab_container1",{fontSize:"14px",color:"#FFBC44",fontWeight:"bold"},{fontWeight:"normal",color:"#666"});
</script>
</body>
</html>

解决方案 »

  1.   

    就是其中的onmouseover和onmouseout事件在FF中无性触发
      

  2.   

    劝楼主在没有完全理解OOP的时候尽量别进行过渡封装.看你的代码感觉有点像拼凑的代码 看上去很乱..根本没起到封装的效果...<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>兼容性好的TAB选项卡(IE,FF,Opera,Safari,Chrome) </title> 
    <style type="text/css"> 
    #tab_container1{width:600px;text-align:left;} 
    .cls_tab_nav{height:26px;overflow:hidden;font-size:12px;text-align:left;background:url(images/line_bg.jpg) repeat-x bottom;} 
    .cls_tab_nav ul{font-size:9pt;margin:0;padding:0;} 
    .cls_tab_nav_li{background:url(images/tab_bg.jpg) no-repeat -157px 0;width:157px;height:26px;line-height:26px;float:left;display:inline;overflow:hidden;text-align:center;cursor:pointer;} 
    .cls_tab_nav_li_first{background-position:0px 0px;} 
    .cls_tab_nav_li a{text-decoration:none;color:#555;font-size:12px;} 
    .cls_tab_body{border:1px solid #FFAE1E;border-top:none;min-height:260px;padding:20px;} 
    .cls_div{display:none;font-size:14px;} /*新添样式*/ 
    .cls_tab_body .cls_div li{list-style:none;  width:203px;padding:5px 0;padding-left:5px;text-align:left;background:#ffffff; word-wrap:break-word;word-break:normal; list-style:none; list-style-image:url(images/li.gif);} 
    .cls_tab_body .cls_div li.colorful{background:#eeeeee;} 
    .cls_tab_body .cls_div li.contents{background:#000000;color:#ffffff;display:none;} 
    .cls_tab_body .cls_div li.hide{display:none;} 
    .cls_tab_body .cls_div li.show{display:block;} 
    </style> 
    </head> 
    <body> 
    <div id="tab_container1"> 
    <div class="cls_tab_nav"> 
      <ul> 
      <li class="cls_tab_nav_li cls_tab_nav_li_first"> <a href="/">淘气榜 </a> </li> 
      <li class="cls_tab_nav_li"> <a href="/sort/list_1_1.shtml">好评榜 </a> </li> 
      <li class="cls_tab_nav_li"> <a href="#">其它 </a> </li> 
      </ul> 
    </div> 
    <div class="cls_tab_body"> 
      <div class="cls_div" style="display:block;">tab选项卡 </div> 
      <div class="cls_div"> 
      <ul> 
    <li id='l1' class="colorful">1.美特斯邦威，不走寻常路 </li> 
    <li id='l11' class="contents" > <img src="images/mst.gif" alt="美斯特"/>1.美特斯邦威，不走寻常路美特斯邦威，不走寻常路美特斯邦威，不走寻常路美特斯邦威 </li> 
    <li id='l2' >2.关键时刻，我只信赖诺基亚 </li> 
    <li id='l21' class="contents">2.关键时刻，我只信赖诺基亚关键时刻，我只信赖诺基亚关键时刻，我只信赖诺基亚关键时刻， </li> 
    <li id='l3' class="colorful">3.DHC妆前平整乳太棒了 </li> 
    <li id='l31' class="contents">3.DHC妆前平整乳太棒了DHC妆前平整乳太棒了DHC妆前平整乳太棒了 </li> 
    <li id='l4'>4.李宁，中国的名族魂 </li> 
    <li id='l41' class="contents">4.李宁，中国的名族魂李宁，中国的名族魂李宁，中国的名族魂 </li> 
    <li id='l5' class="colorful">5.波导手机，手机中的战斗机 </li> 
    <li id='l51' class="contents">5.波导手机，手机中的战斗机波导手机，手机中的战斗波导手机，手机中的战斗波导手机，手机中的战斗三 </li> 
    <li id='l6'>6.王老吉，不是一般的喜欢你 </li> 
    <li id='l61' class="contents">6.王老吉，不是一般的喜欢你王老吉，不是一般的喜欢你王老吉，不是一般的喜欢你王老吉，不是一般的喜欢你 </li> 
    <li id='l7' class="colorful">7.雅芳，我觉得真不错 </li> 
    <li id='l71' class="contents">7.雅芳，我觉得真不错雅芳，我觉得真不错雅芳，我觉得真不错雅芳，我觉得真不错 </li> 
    <li id='l8'>8.不得不赞，移动客服 </li> 
    <li id='l81' class="contents">8.不得不赞，移动客服不得不赞，移动客服不得不赞，移动客服不得不赞，移动客服不得不赞，移动客服 </li> 
    </ul> 
      </div> 
      <div class="cls_div">其它内容/ </div> 
    </div> 
    </div> 
    <script type="text/javascript"> 
    try 
    { 
    document.execCommand("BackgroundImageCache", false, true); 
    } 
    catch(e){} 
    //获取某个元素对象 
    function $(element) 
    { 
    if(arguments.length>1) 
    { 
    for(var i=0,elements=[],length=arguments.length;i <length;i++) 
    elements.push($(arguments[i])); 
    return elements; 
    } 
    if(typeof element=="string") 
    { 
    return document.getElementById(element); 
    } 
      
    else 
    { 
    return element; 
    } 
      
    } 
    //创建一个函数对象 
    var Class= 
    { 
    create:function() 
    { 
      return function() 
      { 
    this.initialize.apply(this,arguments); 
      } 
    } 
    } 
    //实现对象的继承 
    Object.extend=function(destination,source) 
    { 
    for(var property in source) 
    { 
    destination[property]=source[property]; 
    } 
    return destination; 
    } 
    /*新增方法*/ 
    //为元素添加新的元素的class属性 
    function hasClass(element, className) 
    { 
        var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); 
    return element.className.match(reg); 
    } 
    var addClass = function(elem, className) { 
    if ((" " + elem.className + " ").indexOf(" " + className + " ") == -1) { 
    if (elem.className == "") { 
    elem.className = className; 
    } else { 
    elem.className += (" " + className); 
    } 
    } 
    }; 
    /*function addClass(element, className) 
    { 
        if (!this.hasClass(element, className)) 
    { 
            element.className += " "+className; 
    } 
    } */ 
    function removeClass(element, className) 
    { 
        if (hasClass(element, className)) 
    { 
          var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); 
      element.className = element.className.replace(reg,' '); 
    } 
    } //为某一元素添加事件 
    var addEvent = function(elem, eventName, handler) { 
    if (elem.addEventListener) { 
    elem.addEventListener(eventName, handler, false); 
    } else if (elem.attachEvent) { 
    elem.attachEvent("on" + eventName, handler); 
    } 
    }; 
    //创建tab选项卡对象 
    var tabMenu=Class.create(); 
    tabMenu.prototype={ 
    initialize:function(container,selfOpt,otherOpt){ 
      this.container=$(container); 
        var selfOptions=Object.extend({fontWeight:"bold",fontSize:"12px",color:"#FFBC44"},selfOpt||{}); 
      var otherOptions=Object.extend({fontWeight:"normal",fontSize:"12px",color:"#666"},otherOpt||{}); 
      //用for循环得到objs数组,主要是为了兼容非IE浏览器把空白也当作子对象 
      for(var i=0,length=this.container.childNodes.length,objs=[];i <length;i++) 
      { 
      if(this.container.childNodes[i].nodeType==1) 
    objs.push(this.container.childNodes[i]); 
      } 
      var tabArray=objs[0].getElementsByTagName("li"); 
      //用for循环得到divArray数组,主要是为了兼容非IE浏览器把空白也当作子对象 
      var divArray=new Array(); 
      for(i=0,length=objs[1].childNodes.length;i <length;i++) 
      { 
      if(objs[1].childNodes[i].nodeType==1) 
        divArray.push(objs[1].childNodes[i]); 
      } 
      
      //用for循环得到liArray 
      var liArray=objs[1].childNodes[1].getElementsByTagName("li"); 
      /*var liArray=new Array(); 
      for(i=0,length=objs[1].childNodes[1].childNodes[0].childNodes.length;i <length;i++) 
      { 
      if(objs[1].childNodes[1].childNodes[0].childNodes[i].nodeType==1) 
    { 
    liArray.push(objs[1].childNodes[1].childNodes[0].childNodes[i]); } 
      }*/ 
      alert(liArray.length);   for(i=0,length=liArray.length;i <length;i++) 
      { 
      addEvent(liArray[i],"mouseover",function(){alert("sfsdfsdf")}); 
      liArray[i].length=length; 
    liArray[i].index=i; 
    if(i%2==0) 
    { 
    liArray[i].onmouseover=function(e) 
    { 
    var thisid=this.id; 
    var li=document.getElementById(thisid); 
    var li_color=document.getElementById(thisid+"1"); 
    addClass(li,"hide"); 
    addClass(li_color,"show"); }; liArray[i].onmouseout=function() 
    { 
    var thisid=this.id; 
    var li=document.getElementById(thisid); 
    var li_color=document.getElementById(thisid+"1"); 
    /*alert(li); 
    alert(li_color);*/ 
    removeClass(li,"hide"); 
    removeClass(li_color,"show"); } 
    } 
      }  for(i=0,length=tabArray.length;i <length;i++) 
      { 
      tabArray[i].length=length; 
      tabArray[i].index=i; 
      var nodeE,nodeE2;
      tabArray[i].onmouseover=function() 
      { 
     
    //其它选项卡样式设置 
    for(var j=0;j <this.length;j++) 
    { 
    tabArray[j].style.backgroundPosition="-"+tabArray[j].offsetWidth+"px 0"; 
    for(var property in selfOptions) 
    { 
    nodeE = tabArray[j].firstChild;
    while(nodeE.nodeType != 1){
    nodeE = nodeE.nextSibling;
    }
    //nodeE.style.backgroundColor = "red"
     nodeE.style[property]=otherOptions[property]; 
    } 
    } 
    //当前选项卡样式 
    this.style.backgroundPosition="0 0"; 
    for(var property in selfOptions) 
    { 
    nodeE2 = this.firstChild;
    while(nodeE2.nodeType != 1){
    nodeE2 = nodeE2.nextSibling;
    }
    nodeE2.style[property]=selfOptions[property]; 
    /* 
      注意this.style.property和selfOptions.property的用法错误 
      style.fontWeight正确 
      style["fontWeight"]正确 
      style["font-weight"]错误 
    */ 
    } 
    //隐藏其它选项卡 
    for(j=0;j <this.length;j++) 
    { 
    divArray[j].style.display="none"; 
    } 
    //显示当前选项卡 
    divArray[this.index].style["display"]="block"; 
      } 
    } 
      } 
    } var tab1=new tabMenu("tab_container1",{fontSize:"14px",color:"#FFBC44",fontWeight:"bold"},{fontWeight:"normal",color:"#666"}); 
    </script> 
    </body> 
    </html> 
      

  3.   

    在FF下用 firstChild lastChild nextSibling ... 时要注意
    FF下会把换行也认为是一个节点 所以如果下面这样
    <ul>
    <li></li>这里 ul.firstChild可能是#text(一个\n) 这时你调用 ul.firstChild.style.就会报错...
    执行的结果也不一定是你想要的
      

  4.   

    写简化的HTML和JS
    样式 数据 全不要
    这样调试方便还有现在底层的JS操作 推荐用现成的JS框架 比如jquery什么的 不要自己实现DOM操作了 自己写的话 光浏览器的兼容就很浪费时间
      

  5.   

    好评榜里面的OnMouseOver在IE7里有效，Google和ff里无效，其它的没测。
      

  6.   

    如果你解决的不是这里的OnMouseOver的话，那么不好意思。是我看错了。
      

  7.   

    是啊，就是兼容性没有解决好，我在IE6 IE8下都没问题，FF就是不行！所以请大家给分析哈啊！
      

  8.   

    一般都是被挡住了，把z-index设置一下就好。