Mouseover- und mouseout Ereignisse 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 mouseover das Kind Drop_Down div es gleitet auch nach oben.

Weiß jemand, wie ich das beheben kann?

Answer 1

Verwenden Sie die mouseenter und mouseleave Veranstaltungen statt new 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 richten Sie 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 Elemente . Sie werden auf das genaue Element gefeuert, an das Sie sie binden, und lösen so Ihr Problem.

Answer 2

Als Alternative, Generika (nicht Prototype spezifisch) beantworten

Das von Event-Bubbling verursacht wird. Weitere Informationen, einschließlich, wie Sie es in untergeordneten Knoten abbrechen, hier: http://www.quirksmode.org/js/events_order.html