的onmouseout在父亲打电话时的onMouseOver儿童

我有这样的代码：的onmouseout在父亲打电话时的onMouseOver儿童

<div id='father' style='width:50px; height:50px;overflow:hidden;' onMouseOut="alert('called');"> 
    <div id='container' style='margin-top:0px;width:100%;height:100%;transition: margin 2s;'> 
     <div style='width: 50px;height:50px;background-color:rgb(255,0,0);' onClick="document.getElementById('container').style.marginTop='-50px'"></div> 
     <div style='width: 50px;height:50px;background-color:rgb(0,0,255);' onClick="document.getElementById('container').style.marginTop='0px'"></div> 
    </div> 
</div>

如果您点击红色框，蓝色框将从底部...时出现的onMouseOver蓝色框被称为，onMouseOut从父亲也被称为...

你知道一个解决方法，如果鼠标仍然在“父亲”里面看不到警报。

来源

2013-10-22 Nelson Galdeman Graziano

这里是一个更新的拨弄工作的例子：http://jsfiddle.net/SXj2W/2/

当的onmouseout被触发，你必须检查，看该事件的相关目标不是你的父母DIV的子元素。你可以使用下面的代码来做到这一点。

鼠标移开时添加一个函数来调用你的页面的<HEAD>

function onMouseOut(self,event) {  
    var e = event.toElement || event.relatedTarget; 
    while(e && e.parentNode && e.parentNode != window) { 
     if (e.parentNode == self|| e == self) { 
      if(e.preventDefault) e.preventDefault(); 
      return false; 
     } 
     e = e.parentNode; 
    } 
    alert('Mouseout on father'); 
}

，然后更新您的父母DIV的样子：

<div id='father' style='width:50px; height:50px;overflow:hidden;' onmouseout="onMouseOut(this,event)">

来源

2013-10-22 19:58:08 JRam

正是我需要的：d就像一个魅力！谢谢。 –

回答

相关问题