CODEWITHSUNDEEP
jquerydelegates
kyo
kyo

Reputation: 63

Jquery: mouseover/mouseenter with delegate

I have this code:

<!-- language: lang-js -->

$('#trajectory-sequence').delegate('li:not(.disabled)','mouseenter mouseleave', function( event ) 
{
    if( event.type == 'mouseenter') 
        $(this).find("div:gt(0)").show();
    else if(event.type=='mouseleave')
        $(this).find("div:gt(0)").hide(); 
});

that shows/hides some children. Now, I would like to perform an action when the mouse is over of one of these children. I have this:

<!-- language: lang-js -->

$('#trajectory-sequence').delegate('li:not(.disabled) div:nth-child(4)','mouseover', 
function( ) {
    alert('mouseover');
});

But it seems that the mouseover event is never triggered. But when I use mouseenter instead of mouseover, it works perfectly, why?

Upvotes: 2

Views: 1897

Answers (1)

ShankarSangoli
ShankarSangoli

Reputation: 69905

The mouseenter event differs from mouseover in the way it handles event bubbling.

With mouseover event, if the mouse pointer is moved over the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseenter event, on the other hand, only triggers its handler when the mouse enters the element it is bound to, not a descendant. So mouseenter works.

Upvotes: 4

Related Questions