mouseenter/mouseleave에서 토글 이벤트가 여러 번 실행되는 것을 중지하는 방법은 무엇입니까?

Question

저는 jQuery 토글 방식을 사용하여 <div>의 가시성을 토글하고 있습니다. 이 토글은 mouseenter 및 mouseleave 이벤트에서 시작되어 mouseenter에서 접히고 mouseleave에서 fold하는 div의 효과를 만듭니다. 문제는 사용자가 <div> 위에 마우스를 몇 번 드래그 한 다음 <div>을 떠날 경우 div가 여러 번 반복 토글됩니다. 이것은 사용자가 우연히 <div>에 마우스 포인터를 중심으로 움직이는 경우 발생할 수 있습니다. 아무도 내가이 문제를 피할 수있는 방법에 대한 아이디어가 있습니까?

고맙습니다.

Answer 1

두 가지 :

1. 당신이 사용하고자하는 경우 모두 mouseenter 및 mouseleave i를 hover() 기능을 사용하는 것이 좋습니다 것;

2. 트리거 된 애니메이션을 사용하는 경우 stop() 메서드를 사용하는 것이 좋습니다. 그래서

:

$("div.someclass").hover(function() { 
    $("...").stop().fadeIn("slow"); 
}, function() { 
    $("...").stop().fadeOut("slow"); 
}); 

참고 :은 (내가 여기 페이드를 사용하고 있습니다) 토글 링하는지에 대한 적절한 선택으로 "..."를 교체하고 적절한 효과를 사용합니다. 또한 이벤트 핸들러의 this은 이벤트 소스를 나타냅니다.

Answer 2

더 일반적인 mouseover/mouseout 이벤트를 사용하여 내부 마우스 움직임에 불이 들어오지 않는 호버 이벤트를 얻을 수 있습니다.

그러나 마우스 이벤트에 toggle을 사용하지 않으면 예를 들어 쉽게 잘못 될 수 있습니다. 마우스가 페이지로드시 요소 위에 있거나 마우스가 브라우저를 떠난 경우 (마우스가 mouseout을 발사하지 않고 요소의 경계를 벗어날 수있는 경우). 콘텐츠를 표시하는 over에 대해 별도의 기능을 사용하고 콘텐츠를 숨기는 방법은 out입니다.

더 나은 점은 정확하게이 목적을위한 hover() 방법을 사용하는 것입니다.

Answer 3

Cletus의 정답을 제외하고는 mouseenter 및 mouseleave 이벤트를 사용하는 것이 잘못된 것은 아니라고 지적하고 싶습니다.

$("div.someclass").on("mouseenter", function() { 
    $("...").stop().fadeIn("slow"); 
}); 
$("div.someclass").on("mouseleave", function() { 
    $("...").stop().fadeOut("slow"); 
});  

Here가 jsFiddle 예 :

입니다 : 트릭은 사실 우리는 여전히 할 수는 stop() 방법에있는