Mouse and mouse shooting

Question

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

With Drop_Down mouse on Drop_Down Navigation Drop_Down slides down, and with Drop_Down mouse up.

The problem is that if I Drop_Down mouse on the child Drop_Down it will also Drop_Down up.

Does anyone know how I can fix this?

Answer 1

Use mouseenter and mouseleave events instead of new in Prototype 1.6.1 (but not new in IE). You must migrate your inline event handlers from your markup to do this:

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

And configure the events in the script:

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

Unlike mouseover and mouseout , these events do not bubble from children. They quit with the exact element that you connect them to, well versed in the problem.

Answer 2

As an alternative, general (non-specific) answer

This is triggered by the bubbling event. Additional information, including how to cancel it in child nodes, is here: http://www.quirksmode.org/js/events_order.html