Problem with Onmouseover child div and event bubble

Question

I have a small div above (hover) big. I assign onmouseover and onmouseout events for the wrapper div.
For animation with inscription lettering image.

The problem is that the mouse is located above the label itself, causing an undesirable result (possibly a bubble event).

And one more problem: sometimes, when you move the mouse from outside to the container, you get a triple sequence: (it should be only 2):
-I'm overflowing, -I'm out- -I'm done -

How to make it work? ( no jquery )
should work on all browsers.

Demo

I added the firebug console protocol for better debugging.

UPDATE:
I added this (not in the online demo) to RollOverDescription:

if (!eventHandle) var eventHandle = window.event;               
var srcEle = eventHandle.srcElement.id;             
if(srcEle=="imageDescription" ){
    return;
}

But that does not help.

Answer 1

This quirksmode article (below) has an explanation of what you are experiencing and a script that can help you. There is a lot of cross browser information regarding mouse events.

OK, here is the working code. I do not promise that this is most efficient or that it will not cause memory leak in IE (or that it works in IE - let me know). This is why people use libraries much safer and easier.

// a general purpose, cross browser event adder
// returns a function that if run removes the event
function addEvent( el, eventType, handler, capturing ) {
    if( el.addEventListener ) {
        el.addEventListener( eventType, handler, capturing || false );
        var removeEvent = function() { el.removeEventListener( eventType, handler, capturing || false ) };
    } else if( el.attachEvent ) {
        var fn = function() {
            handler.call( el, normalise( window.event ) );
        };
        el.attachEvent( 'on'+eventType, fn );
        var removeEvent = function(){ el.detachEvent( 'on'+eventType, fn ) };
    }
    function normalise( e ) {
        e.target = e.srcElement;
        e.relatedTarget = e.toElement;

        e.preventDefault = function(){ e.returnValue = false };
        e.stopPropagation = function(){ e.cancelBubble = true };
        return e;
    };
    return removeEvent;
};



// adds mouseover and mouseout event handlers to a dom element
// mouseover and out events on child elements are ignored by this element
// returns a function that when run removes the events
// you need to send in both handlers - an empty function will do
function addMouseOverOutEvents( element, overHandler, outHandler ) {

    function out( e ) {
        var fromEl = e.target;
        var toEl = e.relatedTarget;
        // if the mouseout didn't originate at our element we can ignore it
        if( fromEl != element ) return;
        // if the element we rolled onto is a child of our element we can ignore it
        while( toEl  ) {
            toEl = toEl.parentNode;
            if( toEl == element ) return;
        }
        outHandler.call( element, e );
    }

    function over( e ) {
        var toEl = e.target;
        var fromEl = e.relatedTarget;
        // if the mouseover didn't originate at our element we can ignore it
        if( toEl != element ) return;
        // if the element we rolled from is a child of our element we can ignore it
        while( fromEl  ) {
            fromEl = fromEl.parentNode;
            if( fromEl == element ) return;
        }
        overHandler.call( element, e );
    }

    var killers = [];
    killers.push( addEvent( element, 'mouseover', over ) );
    killers.push( addEvent( element, 'mouseout', out ) );
    return function() {
        killers[0]();
        killers[1]();
    }
}

Usage example:

// add the events
var remover = addMouseOverOutEvents(
    document.getElementById( 'elementId' ),
    function( e ) {
        this.style.background = 'red';
        console.log( 'rolled in: '+e.target.id );
    },
    function( e ) {
        this.style.background = 'blue'
        console.log( 'rolled out: '+e.target.id );
    }    
);

//remove the events
remover();