的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就像一個魅力！謝謝。 –

回答

相關問題