解决鼠标经过内部元素触发ONMOUSEOUT事件的问题 - javascript -

解决鼠标经过内部元素触发ONMOUSEOUT事件的问题

时间:2010-01-24 21:40:27   来源:   评论:加载中...   点击:加载中...
解决鼠标经过内部元素触发ONMOUSEOUT事件的问题 ,暂时有下面两种办法1.当鼠标从外层离开开始计时SETTIMEOUT,一段时间后再执行ONMOUSEOUT...

if(typeof(HTMLElement)!="undefined"){  
       HTMLElement.prototype.contains    =    function(obj) {  
           while(obj!=null    &&    typeof(obj.tagName)!="undefind")  
           {if(obj==this)    return    true;    obj=obj.parentNode;}    return    false;  
       };  
   }


var outtime;//全局的定时
function setTab(name,cursel,n){//name:OBJ的前缀名称;cursel:鼠标经过的OBJ的下标;n:总数
  var con1=document.getElementById(name+"_1");//获取默认显示的二级OBJ
  var con_now=document.getElementById(name+"_"+cursel);//获取当前二级OBJ
  var con_index=document.getElementById(name+"_index_"+cursel);//获取触发当前二级的一级中的OBJ
  var con_over=0;//设置鼠标是否移出二级列表
  clearTimeout(outtime);//清除鼠标移出时间,因为移到另一个一级OBJ上时不需要定时来隐藏上一次显示的二级OBJ以及显示默认,只需要从头开始显示当前鼠标经过一级OBJ对应的二级
for(i=1;i<=n;i++){ //循环关闭所有,打开当前
  var con=document.getElementById(name+"_"+i);
  con.style.display=i==cursel?"block":"none";
}

  con_now.onmouseover=function(){//鼠标移出一级进入二级时,经过二级OBJ的条件为真
  con_over=1;
  }

  con_index.onmouseout=function(){//鼠标移出一级OBJ,先定时判断是否进入二级
          outtime=setTimeout(getout,100);
    }

  con_now.onmouseout=function(){//鼠标移出二级OBJ
              if(!this.contains(event.toElement)) show1();//判断到底这个OUT是OUT到其内部元素上了还是真的OUT了
    }

function getout(){
if(con_over==0)
show1();
}

function show1(){
con_now.style.display="none";
con1.style.display="block";
    }
}

+++++++++++++++++++++++++++++++++++++++++++第二种判断孩子的办法结束




<div id="nav_index_1" onMouseOver="setTab('nav',1,2)"></div>
<div id="nav_index_2" onMouseOver="setTab('nav',1,2)"></div>

<div id="nav_1"><a>1</a></div>
<div id="nav_2"><a>2</a></div>


相关热词搜索:

 
上一篇:JavaScript 获取当前浏览器窗口尺寸大小的脚本
下一篇:熟悉JavaScript数组对象的length属性
收藏 将此文推荐给朋友
分享到:
推荐资讯