Onmouseover ребенок div проблема и всплеск событий

Question

У меня есть маленький div над (hover) большим.
Я присваиваю события onmouseover и onmouseout обёртке div.
Для анимации прокрутки надписи.

Проблема в том, что мышь находится над самой надписью, что приводит к нежелательному результату (возможно, всплывающему событию).

И еще одна проблема: иногда, когда вы перемещаете мышь снаружи в контейнер, вы получаете тройную последовательность: (должно быть только 2):
-Я более -Я вышел- -Я более-

Как заставить это работать? ( без запросов )
должен работать во всех браузерах.

Демо

Я добавил журнал консоли Firebug для лучшей отладки.

UPDATE:
Я добавил это (не в онлайн-демонстрации) в RollOverDescription:

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

Но это не помогает.

Answer 1

Эта статья о причудливом режиме (в нижней части) содержит описание того, что вы испытываете, и сценарий, который может вам помочь. Относительно событий мыши тоже есть много информации о браузерах

ОК, вот рабочий код. Я не обещаю, что это наиболее эффективно или что оно не вызовет утечек памяти в IE (или что оно работает в IE - пожалуйста, дайте мне знать). Вот почему люди используют библиотеки, гораздо безопаснее и проще.

// 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]();
    }
}

Пример использования:

// 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();