0

私はこのコードを持っています:

http://jsfiddle.net/SXj2W/

<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 も呼び出されます...

マウスがまだ「父」の中にある場合にアラートが表示されないようにする回避策を知っていますか。

4

1 に答える 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)">
于 2013-10-22T19:58:08.053 に答える