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

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

时间:2010-01-24 21:40:27   来源:   评论:加载中...   点击:加载中...
解决鼠标经过内部元素触发ONMOUSEOUT事件的问题 ,暂时有下面两种办法1.当鼠标从外层离开开始计时SETTIMEOUT,一段时间后再执行ONMOUSEOUT...
解决鼠标经过内部元素触发ONMOUSEOUT事件的问题 ,暂时有下面两种办法
1.当鼠标从外层离开开始计时SETTIMEOUT,一段时间后再执行ONMOUSEOUT来执行的函数;这段时间就是为了判断是否鼠标移动到了其内部元素。如果真的移动到了内部的元素上,这时候又触发了它本身以及外层的ONMOUSEOVER事件,正好用外层的OVER事件来消除这个定时从而不运行真正OUT后执行的函数。
2.就是判断鼠标OUT的时候,是否OUT到了它的内部元素上,也就是说,要判断鼠标OUT的时候移动到的元素是不是属于这个元素的内部元素。
比如本来是要这样执行一个函数show1();
xxx.onmouseout=function(){
show1();
}
为了判断得改成下面这样,先看看这个事件中鼠标移动到的元素是不是包含在它本身当中,不属于才执行后面的函数。
xxx.onmouseout=function(){
if(!this.contains(event.toElement)) show1();
}

但是这个contains只有IE支持,为了让非IE支持就有了下面这段代码,增加了这么个contains函数:
   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;  
       };  
   }
其实就是不停的找鼠标移动到的元素的父元素,看这个父元素是不是就是鼠标原来呆的地方。如果这个元素他爹或他爷爷就是这个鼠标刚开始OUT出来的元素,那么这个元素肯定就是鼠标OUT出来的元素的内部元素。


这两个办法分别写了两段JS


++++++++++++++++++++++++++++++++++++++++++++++第一种定时的办法
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,一小段时间之后判断是否进入的是二级OBJ内部的元素
          outtime=setTimeout(show1,100);
    }
  con_now.onmouseover=function(){//鼠标在二级OBJ的内部元素移动时,也触发了二级元素的ONMOUSEOVER,这时候不让它执行鼠标因为进入其内部元素而触发的ONMOUSEOUT事件
          clearTimeout(outtime);
    }
function getout(){
if(con_over==0)
show1();
}

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


+++++++++++++++++++++++++++++++++++++++++++第一种定时的办法结束



+++++++++++++++++++++++++++++++++++++++++++第二种判断孩子的办法
//非IE浏览器的加个CONTAINS函数,可以判断某元素下是否存在另一个元素以达到IE的效果


相关热词搜索:

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