Veranstaltungen Mouseover- und mouseout auf Kinder schießen

Question

Der Code:

<div id="Navigation" 
    onmouseover="new Effect.toggle('Drop_Down','slide',{duration: 0.8});" 
    onmouseout="new Effect.toggle('Drop_Down','slide',{duration: 0.8});">
    <div id="Drop_Down">
        <% include Navigation %>
    </div>
</div>

Wenn ich Mouseover die Navigation die Drop_Down div nach unten gleitet, und wenn ich mouseOut es gleitet nach oben.

Das Problem ist, wenn ich das Kind Drop_Down div Mouseover es gleitet nach oben auch.

Wer weiß, wie kann ich das Problem beheben?

Answer 1

Mit dem mouseenter und < a href = "http://msdn.microsoft.com/en-us/library/ms536946(VS.85,loband).aspx" rel = "noreferrer"> mouseleave Veranstaltungen statt neu in Prototype 1.6.1 (aber nicht neu in IE). Sie müssen Ihre Inline-Event-Handler aus Ihrem Markup bewegen, dies zu tun:

<div id="Navigation">
    <div id="Drop_Down">
        <% include Navigation %>
    </div>
</div>

Und Setup die Ereignisse in Skript:

<script>
document.observe('dom:loaded', function() {
    $('Navigation')
        .observe('mouseenter', function() {
            new Effect.toggle('Drop_Down','slide',{duration: 0.8})
        })
        .observe('mouseleave', function() {
            new Effect.toggle('Drop_Down','slide',{duration: 0.8})
        })
})
</script>

Im Gegensatz zu mouseover und mouseout, tun diese Ereignisse nicht Blase aus untergeordneten Elementen. Sie werden auf die genaue Element gefeuert Sie sie binden, schön Ihr Problem zu lösen.

Answer 2

Als alternatives, Generika (nicht Prototype spezifisch) Antwort

Dies wird durch Event-Bubbling verursacht. Weitere Informationen, einschließlich, wie es Knoten in Kind abzubrechen, hier: http://www.quirksmode.org/js/events_order.html