Onmouseover 하위 div 문제 및 이벤트 버블 링

Question

큰 항목 위에 작은 div가 있습니다.
onmouseover 및 onmouseout 이벤트를 래퍼 div에 지정합니다.
이미지 캡션 롤오버 애니메이션 용. 마우스가 원치 않는 결과 (아마 이벤트 버블 링)를 일으키는 원인이되는 캡션 자체 이상인 경우

문제입니다.

그리고 또 다른 문제는 :
-I 오전 오버 -I 오전 OUT- -I 오전 오버 : (그냥이되어야합니다) : 당신은 컨테이너 외부에서 마우스를 이동할 때 때때로 당신은 AA 트리플 순서를 얻을 그것이 작동되도록하는 방법

? (없음 JQuery와)
모든 브라우저에서 작동해야합니다.

Demo

나는 더 나은 디버깅에 불을 지르고 콘솔 로그를 추가했습니다.

업데이트 : RollOverDescription에 (안 온라인 데모)이 추가되었습니다
:

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

하지만 도움이되지 않습니다.

Answer 1

This article 쿼크 모드에서 (아래쪽)를 사용하면 발생하는 것에 대한 설명과 당신을 도울 수있는 스크립트가 있습니다. 마우스 이벤트도

확인에 대한 크로스 브라우저 많은 정보가있다, 여기에 몇 가지 작업 코드입니다. 나는 이것이 가장 효율적이라고 약속하지 않거나 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();