onmouse 在div包含子元素失效问题

最新推荐文章于 2023-04-21 09:37:58 发布

Caigesbsb

最新推荐文章于 2023-04-21 09:37:58 发布

阅读量1.4k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/gai_ge/article/details/8545877

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

问题描述：

javascript 在处理onmouseout事件时候如果div含有子元素，当鼠标移动到div的内部的子元素时候就会触发，但是这时候我们并不这样理解，

我们还会理解为这时候还在div内部。

例如

但我们把鼠标移动到child上面的时候就会触发onmouseout事件，这时候我们可以在onmouseout内部写上判断事件的来源来真正实现我们需要的

onmouseout效果。

οnmοuseοut="hideMsgBox(event);"

if (theEvent){

　 var browser=navigator.userAgent; //取得浏览器属性

　 if (browser.indexOf("Firefox")>0){ //如果是Firefox

　　 if (document.getElementById('divOnline').contains(theEvent.relatedTarget)) { //如果是子元素

　　 return; //结束函式

} 

} 

if (browser.indexOf("MSIE")>0){ //如果是IE

if (document.getElementById('divOnline').contains(event.toElement)) { //如果是子元素

return; //结束函式

}

}

if(typeof(HTMLElement)!="undefined")    //给firefox定义contains()方法，ie下不起作用
{   
      HTMLElement.prototype.contains=function(obj)   
      {   
          while(obj!=null&&typeof(obj.tagName)!="undefind"){ //通过循环对比来判断是不是obj的父元素
   　　　　if(obj==this) return true;   
   　　　　obj=obj.parentNode;
   　　}   
          return false;   
      };   
}

DOM通过event对象的relatedTarget属性提供了相关元素的信息。

这个属性只对于mouseover和mouseout事件才包含值；对于其他事件，这个属性的值是null。

IE就是个奇葩!!!

IE不支持realtedTarget属性，但提供了保存着同样信息的不同属性。在mouseover事件触发时，IE的fromElement属性中保存了相关元素；在mouseout事件出发时，IE的toElement属性中保存着相关元素。可以把下面这个跨浏览器取得相关元素的方法添加到EventUtil对象中：

参考：http://www.cnblogs.com/fullhouse/archive/2012/02/03/2337393.html