문제 mouseout 이벤트

StackOverflow https://stackoverflow.com/questions/49630

문제

내가 사용하여 자바 스크립트를 숨기는 이미지를 일부를 보여 텍스트 그게 아래에 숨겨진습니다.그러나 때,텍스트가 표시되는 경우 당신은 스크롤 통해,그것은 화재 mouseout 이벤트에서 컨테이너는 다 텍스트와 이미지를 보여줍니다 다시 가고,그것만으로 들어가 이상한다.

Html 다음과 같습니다:

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

와 자바스크립트(사용 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;
}

이것은 정말 간단하지만 난 그냥 없 내습니다.

도움이 되었습니까?

해결책

나에게 컨테이너 div:

position: relative;

추가 세 번째 div 에서 컨테이너(해야 마지막 아동의 컨테이너):

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

을 잡을 마우스 오버 및 이벤트에 이 div 대신 합니다.

이 없기 때문에 아이는 요소는 가짜 마우스오버 및 이벤트 전달합니다.

편집:

내가 무엇을 믿고 일어나는 커서가 움직임에서 상위 요소에 아동 요소,mouseout 이벤트 발생에서 부모 요소,그리고 마우스 오버 이벤트 발생에 아동 요소입니다.그러나,경우에 마우스 오버 핸들러 아이에 요소를 잡을 수 없는 이벤트와 중 전파,부모 요소도 받게 될 것입니다 mouseover 이벤트입니다.

다른 팁

그것은 소리처럼 당신이 정말로 원하는 것입니다 mouseenter/mouseleave (즉,독자적인 이벤트,그러나 쉽게뮬레이션):

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

또는 패치 prototype.js 고 사용 mouseenter 고 mouseleave 니다.참고했는지 확장에 대한 검사를 떠나는 창 또는 들어가 XUL chrome;이 일부를 해결하는 경우 가장자리에서는 파이어 폭스습니다.

이 되지 않을 수 있습니다 최고의 솔루션만을 설정할 수 있습 글로벌 boolean 변수에서 액세스할 수 있는 두 방법 모두는 것이 지정하는 경우 마지막 작업이 HoverIn 또는 HoverOut.를 사용할 수 있습니다 boolean 변수를 결정하는 경우에는 코드는 실행 또는 아닙니다. 

if (bWasHoverIn){
   ...
}

안 onmouseover 이벤트에 이미지 div 및 onmouseout 이벤트에 텍스트 div?

@라이언 boolean 정말 도움,그것은 단지 반복,하지만 마우스 오버 이벤트는 여전히 발생하고 텍스트가 숨겨진.

@브라이언은 그것을 사용하는 방법이지만,그것은 행동이 동일한 방법입니다.

나는 확실하지 않는 경우에 이에 맞는 것이의 나머지 부분과 스타일이지만,아마도 변경할 경우 css 에 텍스트 div 그래서 그와 같은 크기의 이미지,또는 고정 크기의 외부 div,그 때 마우스로 발생하는 이벤트의 크기는 외부 div 변경하지 않으로 너무 많이 발생 mouseout 이벤트입니다.

이 의미가 있습니까?

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top