애니메이션 요소가있는 jQuery mouseleave 버그

Question

이상한 문제가 발생했습니다.

jQuery 1.4.1 mouseenter/mouseleave 이벤트는 마우스를 움직이면 올바르게 실행됩니다. 그러나 일부 브라우저에서는 커서 자체가 정적 인 채로 있지만 요소가 animate()에 의해 멀리 이동 될 때 버그가 발생합니다. 신속 중지 다음 요소에 마우스를 이동하는 경우 브라우저에 따라 다른 결과를 얻을 수 있습니다,

jQuery('somelement').bind(
{ 
    mouseenter: function(e) { 
    log.debug("enter"); 
    $(this).animate({left: 9999}, 2000); 
    }, 
    mouseleave: function() { 
    log.debug("leave"); 
    } 
}); 

:

그래서 같은 코드를 상상한다.

FF3.6, Safari 4, IE7 : mouseleave는 마우스 자체가 정지 된 상태에서도 커서가 애니메이션 요소를 떠날 때 예상대로 작동합니다.

IE6, IE8, Opera 9/10, Safari 3, Chrome : 요소가 창 밖에있을 때도 실행되지 않습니다. 올바른 mouseleave 이벤트를 트리거하려면 약간의 마우스 이동이 필요합니다.

아이디어를 고치는 방법은 무엇입니까?

Answer 1

mouseover, mouseleave, mouseover 및 mouseout 함수는 모두 실제 객체가 아니라 마우스에 바인딩되어있는 것처럼 보입니다. 이것은 인라인 대안을 사용할 때 마찬가지입니다 : onmouseout 등

내가 아는 한 실제로하는 일은 훌륭한 대안이 아닙니다. 그것이 절대적으로 필요한 기능이라면, 여기에 내가 어떻게 할 것인가.

1. 요소에 대한 마우스 센터 처리기를 만듭니다. 마우스가 요소에 들어가면 mouseout과 mousemove를 바인딩합니다.
2. mousemove 이벤트가 호출되면 해당 이벤트 객체를 사용하여 마우스의 x 및 y 위치를 전역 변수에 저장합니다.
3. while 루프를 사용하여 요소를 이동시키는 사용자 정의 애니메이션 함수를 사용하십시오. while 루프에서 2 단계에서 저장 한 x 및 y 좌표에서 요소가 벗어 났는지 확인합니다.
4. 요소가 x 및 y 좌표에서 벗어난 경우 필요한 작업을 수행하고 또한 mousemove를 바인딩 해제합니다 (그렇지 않으면 불필요한 리소스를 다 먹어 버립니다). 이것은 1 단계의 mouseout이 호출 될 경우 실행되는 함수 여야합니다.

희망적입니다. 오늘 더 많은 시간을 찾으면 어떻게 작동하는지 볼 수 있도록 예제 바이올린을 제작할 것입니다.