解决鼠标经过内部元素触发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>
2/2 首页 上一页 1 2