私はこのコードを持っています：
<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も呼び出されます
マウスがまだ「お父さん」の中にいる場合は警告が表示されないようにするための回避策をご存知ですか。
回答：
回答№1の場合は3これは実用的な例を含む更新されたフィドルです。 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)">