problems with mouseout event

Question

I'm using javascript to hide an image and show some text thats hidden under it. But, when the text is shown if you scroll over it, it fires the mouseout event on the container, that then hides the text and shows the image again, and it just goes into a weird loop.

The html looks like this

<div onmouseover="jsHoverIn('1')" onmouseout="jsHoverOut('1')">
    <div style="" id="image1" />
    <div id="text1" style="display: none;">
        <p>some content</p>
        <p>some more content</p>
    </div>
</div>

And the javascript ( It uses scriptaculous )

function jsHoverIn (id)
{
    if ( !visible[id] )
    {
        new Effect.Fade ("image"+id, {queue: { position: 'end', scope: id } });
        new Effect.Appear ("text"+id, {queue: { position: 'end', scope: id } });
        visible[id] = true;
    }
}
function jsHoverOut (id)
{
    var scope = Effect.Queues.get( id );
    scope.each( function( effect ){ effect.cancel() } );

    new Effect.Fade ("text"+id, {queue: { position: 'end', scope: id } });
    new Effect.Appear ("image"+id, {queue: { position: 'end', scope: id } });
    visible[id] = false;
}

This seems really simple, but i just cant wrap my head around it.

Answer 1

This may not be the best solution but you could set a global boolean variable that would be accessible to both methods that would just specify if the last action was HoverIn or HoverOut. You could use this boolean variable to determine if the code should run or not.

if (bWasHoverIn){
   ...
}

Answer 2

Shouldn't the onmouseover event be on the image div and the onmouseout event be on the text div?

Answer 3

@Ryan The boolean doesnt really help, it just avoids the loop, but the mouseover event is still fired and the text gets hiden.

@Brian It used to be that way, but it behaved the same way.

Answer 4

I'd give the container div:

position: relative;

and add a third div in the container (should be the last child of the container) with:

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

and catch the mouseover and mouseout events on this div instead.

Because it has no child elements, you shouldn't get spurious mouseover and mouseout events propagating to it.

Edit:

What I believe happens, is that when the cursor moves from a parent element onto a child element, a mouseout event occurs on the parent element, and a mouseover event occurs on the child element. However, if the mouseover handler on the child element does not catch the event and stop it propagating, the parent element will also receive the mouseover event.

Answer 5

I'm not sure if this would fit with the rest of your styling, but perhaps if you changed the css on the text div so it was the same size as the image, or fixed the size of the outer div, then when the mouseover event fired, the size of the outer div wouldn't change so much as to cause the mouseout event.

Does this make sense?

Answer 6

It sounds like what you really want is mouseenter/mouseleave (IE proprietary events, but easy to emulate):

// Observe mouseEnterLeave on mouseover/mouseout
var mouseEnterLeave = function(e) {
    var rel = e.relatedTarget, cur = e.currentTarget;
    if (rel && rel.nodeType == 3) {
        rel = rel.parentNode;
    }
    if(
        // Outside window
        rel == undefined ||
        // Firefox/other XUL app chrome
        (rel.tagName && rel.tagName.match(/^xul\:/i)) ||
        // Some external element
        (rel && rel != cur && rel.descendantOf && !rel.descendantOf(cur))
    ) {
        e.currentTarget.fire('mouse:' + this, e);
        return;
    }
};
$(yourDiv).observe('mouseover', mouseEnterLeave.bind('enter'));
$(yourDiv).observe('mouseout', mouseEnterLeave.bind('leave'));

// Use mouse:enter and mouse:leave for your events
$(yourDiv).observe(!!Prototype.Browser.IE ? 'mouseenter' : 'mouse:enter', yourObserver);
$(yourDiv).observe(!!Prototype.Browser.IE ? 'mouseleave' : 'mouse:leave', yourObserver);

Alternatively, patch prototype.js and use mouseenter and mouseleave with confidence. Note that I've expanded the check for leaving the window or entering XUL chrome; this seemed to fix some edge cases in Firefox for me.