jQuery의 mouseout ()과 mouseleave ()의 차이점은 무엇입니까?

jQuery의 mouseout ()과 mouseleave ()의 차이점은 무엇입니까?

---

jQuery의 mouseout ()과 mouseleave ()의 차이점은 무엇입니까?

---

mouseleave 이벤트는 이벤트 버블 링을 처리하는 방식에서 mouseout과 다릅니다. 이 예제에서 mouseout이 사용 된 경우 마우스 포인터가 Inner 요소 밖으로 이동하면 핸들러가 트리거됩니다. 이것은 일반적으로 바람직하지 않은 동작입니다. 반면에 mouseleave 이벤트는 마우스가 하위 항목이 아닌 바인딩 된 요소를 떠날 때만 핸들러를 트리거합니다. 따라서이 예제에서 핸들러는 마우스가 Inner 요소가 아닌 Outer 요소를 벗어날 때 트리거됩니다.

출처 : http://api.jquery.com/mouseleave/

---

mouseout이보다 나은 선택이 있을 수 있습니다 mouseleave.

예를 들어의 요소 옆에 표시 할 도구 설명을 만들었다 고 가정 해 보겠습니다 mouseenter. setTimeout툴팁이 즉시 표시되지 않도록하는 데 사용 합니다. mouseleave사용시 시간 제한을 지우 clearTimeout면 마우스가 도구 설명을 벗어나면 표시되지 않습니다. 이것은 99 %의 시간 동안 작동합니다.

그러나 이제 도구 설명이 첨부 된 요소가 click이벤트 가있는 버튼 이고이 버튼이 사용자에게 confirm또는 alert상자를 표시한다고 가정 해 봅시다 . 사용자가 버튼을 클릭하면 alert화재가 발생합니다. 사용자가 툴팁이 팝업 될 기회가 없을 정도로 빠르게 눌렀습니다 (지금까지는 훌륭했습니다).

사용자가 alert상자 확인 버튼을 누르면 마우스가 요소를 떠납니다. 그러나 브라우저 페이지가 이제 잠금 상태이므로 확인 버튼을 누를 때까지 자바 스크립트 가 실행되지 않습니다 . 즉, mouseleave이벤트 가 실행되지 않습니다 . 사용자가 확인을 누르면 툴팁이 팝업됩니다 (원하는 내용이 아님).

mouseout이 경우 사용 하는 것이 적절한 솔루션이 될 것입니다.

---

jQuery API 문서 :

mouseout

이 이벤트 유형은 이벤트 버블 링으로 인해 많은 골칫거리를 유발할 수 있습니다. 예를 들어,이 예제에서 마우스 포인터가 Inner 요소 밖으로 이동하면 mouseout 이벤트가 해당 요소로 전송 된 다음 Outer로 흘러갑니다. 이는 부적절한 시간에 바인딩 된 mouseout 핸들러를 트리거 할 수 있습니다. 유용한 대안은 .mouseleave ()에 대한 토론을 참조하십시오.

mouseleave위의 이유로 설계된 맞춤 이벤트도 마찬가지 입니다.

http://api.jquery.com/mouseleave/

---

이벤트 Mouseout은 마우스가 선택된 요소를 떠날 때와 또한 마우스가 자식 요소를 떠날 때 트리거됩니다.

이벤트 Mouseleave 요소는 포인터가 선택한 요소 만 떠날 때 트리거됩니다.

참조 : W3School

참고 URL : https://stackoverflow.com/questions/4258615/what-is-the-difference-between-jquerys-mouseout-and-mouseleave