A footnote on Prototype's Event.observe and mouseover / mouseout

Recently I worked on a website that had a CSS-based nested navigation and a form. The good old IE6 select overlay bug made it necessary to create an event handler that overlays the select box with an inline-frame (this is a common fix I have read about). To demonstrate the effect, I have set the form to invisible in this example.

Mouseout looks like this:


Mouseover then hides the form:


First I used Prototype's Event.observe():

Event.observe(window, 'load', function() 
{
    if(navigator.appVersion.indexOf('MSIE 6.0') != -1){
     Event.observe($('mainnavlist'), 'mouseover', function() {
         $('form1').style.visibility = 'hidden';
     });
 
     Event.observe($('mainnavlist'), 'mouseout', function() {
       $('form1').style.visibility = 'visible';
     });
    }
};

Unsatisfyingly, this caused a lot of visual flickering.Eventually I found out that Event.observe interprets the event a bit different than javascript usually does, in detail : It is fired even if you enter a child element, so opening a parent menu and navigating my mouse over 5 child items fired 10 events (5 mouseovers when leaving children, 5 mouseouts when entering them).

After changing the code to use standard JavaScript events straightened this out smoothly:

Event.observe(window, 'load', function() 
{    
    $('mainnavlist').onmouseover = function() 
    {
        $('form1').style.visibility = 'hidden';
    };

    $('mainnavlist').onmouseout = function() 
    {
        $('form1').style.visibility = 'visible';
    };
});

Capital!