mouseover i wydarzenia mouseOut strzelające na dzieci

Question

kodu:

<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> 

Gdybym mouseover NavigationDrop_Down div ześlizguje i gdybym mouseOut ślizga się.

Problem polega na tym, że po najechaniu myszką na dziecko Drop_Down div również się zsuwa.

Czy ktoś wie, jak mogę to naprawić?

Answer 1

Użyj zdarzenia mouseenter i mouseleave zamiast new in Prototype 1.6.1 (ale nie nowy w IE). Trzeba przenieść obsługi zdarzeń inline z Twojego znaczników w tym celu:

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

i konfiguracja wydarzenia w skrypcie:

<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> 

przeciwieństwie mouseover i mouseout te wydarzenia nie bańki z elementów podrzędnych . Zostają wystrzeleni z dokładnie tego elementu, do którego je przymocujesz, ładnie rozwiązując problem.

Answer 2

Jako zastępca, rodzajowe (nie Prototype-specyficznej) odpowiedzi

Jest to spowodowane przez zdarzenia propagacji. Więcej informacji, w tym jak je anulować w węzłach potomnych, tutaj: http://www.quirksmode.org/js/events_order.html