mouseout 이벤트 문제

Question

JavaScript를 사용하여 이미지를 숨기고 그 아래에 숨겨진 텍스트를 표시하고 있습니다. 그러나 텍스트를 스크롤하면 텍스트가 표시 될 때 컨테이너에서 mouseout 이벤트가 발생하고 텍스트가 숨겨지고 이미지가 다시 표시되며 이상한 루프가 발생합니다.

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

그리고 자바 스크립트는 (은 script.aculo.us의 사용) :

HTML은 다음과 같습니다

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; 
} 

이 정말 간단한데,하지만 난 그냥 질수가 주위에 내 머리를 정리.

Answer 1

난 컨테이너 DIV 줄 것 :

position: relative; 

과 함께 (컨테이너의 마지막 자식이어야 함) 컨테이너에 세 번째 사업부를 추가

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

와 마우스 오버를 잡을 및 대신이 div에 대한 mouseout 이벤트.

자식 요소가 없으므로 잘못된 마우스 오버 및 mouseout 이벤트가 전달됩니다.

편집 :

내가 어떻게 생각 무엇이며, 그 자식 요소 위에 부모 요소에서 커서 이동은 mouseOut 이벤트는 부모 요소에서 발생하고, 마우스 오버 이벤트는 자식 요소에서 발생할 때 . 그러나 child 요소의 mouseover 핸들러가 이벤트를 포착하지 않고 전파를 중단하지 않으면 부모 요소도 mouseover 이벤트를받습니다.

Answer 2

이것은 최상의 솔루션은 아니지만 마지막 동작이 HoverIn 또는 HoverOut 인 경우 지정하는 두 가지 방법 모두에 액세스 할 수있는 전역 부울 변수를 설정할 수 있습니다. 이 부울 변수를 사용하여 코드 실행 여부를 결정할 수 있습니다.

if (bWasHoverIn){ 
    ... 
} 

Answer 3

onmouseover 이벤트가 이미지 div에 있고 onmouseout 이벤트가 텍스트 div에 있어야하지 않습니까?

Answer 4

@Ryan 부울은 실제로 도움이되지 않으며 단지 루프를 피하지만 mouseover 이벤트가 여전히 발생하고 텍스트가 숨겨집니다.

@ 브라이언 그런 식 이었지만 이전과 같은 방식으로 작동했습니다.

Answer 5

나머지 스타일링에 잘 맞는지 확실하지 않지만 텍스트 div의 CSS를 변경하여 이미지와 크기가 같거나 외부 div의 크기가 고정 된 경우, mouseover 이벤트가 발생하면 외부 div의 크기가 너무 커서 mouseout 이벤트가 발생하지 않을 것입니다.

의미가 있습니까?

Answer 6

당신이 정말로 원하는 것은 mouseenter/mouseleave입니다 (IE 전용 이벤트,하지만 쉽게 모방)처럼 소리 :

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

또는 patch prototype.js 자신있게 mouseenter 및 mouseleave를 사용합니다.창을 나가거나 XUL 크롬을 입력했는지 확인했습니다. 이것은 나를 위해 파이어 폭스에서 몇 가지 문제를 해결하는 것 같았다.