i have the following script firing mouseover and mouseout always twice! what do you suggest i do wrong (unbind, return e.g.)? i tried a few things but nothing helped.

here is the code:

  $('#container').delegate('div.showmenu', 'mouseover mouseenter mouseout mouseleave', function(e){
  if (e.type === 'mouseover' || e.type==='mouseenter') { //jIE requires mouseenter, does not fire mouseover                                 
        if($(this).parents().closest('div').hasClass('whatever')){            
          alert(e.type);  //double-alerts mouseover

          menu.show();

    foldercmenu.hover(
        function(){
            $(this).show();                             
        },
        function(){
            $(this).hide();                                             
        }
    );                              

        }else {
    //do other stuff :-)
    }                                               
  }else if(e.type==='mouseout' || e.type==='mouseleave'){  //IE requires mouseleave, does not fire mouseout  
        alert(e.type);  //double-alerts mouseout
        menu.hide();
        $(this).unbind('mouseover mouseenter mouseout mouseleave');
  }
  //return false;   
});

i have the following script firing mouseover and mouseout always twice! what do you suggest i do wrong (unbind, return e.g.)? i tried a few things but nothing helped.

here is the code:

  $('#container').delegate('div.showmenu', 'mouseover mouseenter mouseout mouseleave', function(e){
  if (e.type === 'mouseover' || e.type==='mouseenter') { //jIE requires mouseenter, does not fire mouseover                                 
        if($(this).parents().closest('div').hasClass('whatever')){            
          alert(e.type);  //double-alerts mouseover

          menu.show();

    foldercmenu.hover(
        function(){
            $(this).show();                             
        },
        function(){
            $(this).hide();                                             
        }
    );                              

        }else {
    //do other stuff :-)
    }                                               
  }else if(e.type==='mouseout' || e.type==='mouseleave'){  //IE requires mouseleave, does not fire mouseout  
        alert(e.type);  //double-alerts mouseout
        menu.hide();
        $(this).unbind('mouseover mouseenter mouseout mouseleave');
  }
  //return false;   
});

• javascript
• jquery
• delegates
• hover

2 Answers 2

mouseover and mouseout a triggered when you enter/leave a child of the element, maybe that's the effect you are seeing.

An other problem is that you are binding the handler to both, mouseover and mouseenter ( and mouseleave and mouseout).

Only bind to mouseenter and mouseleave. jQuery is already taking care of the browser differences.

I had something similar with .delegate();

Have you checked out http://api.jquery./event.stopImmediatePropagation/?

It fixed my issue.