jQuery의 mouse out()과 mouse leave()의 차이점은 무엇입니까?

jQuery의 mouse out()과 mouse leave()의 차이점은 무엇입니까?

jQuery의 mouse out()과 mouse leave()의 차이점은 무엇입니까?

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

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

다음과 같은 경우가 있을 수 있습니다.mouseout보다 나은 선택입니다.mouseleave.

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

그러나 이제 도구 설명이 부착된 요소가 다음과 같은 단추라고 가정해 보겠습니다.click이벤트, 그리고 이 버튼이 사용자에게 메시지를 표시한다고 가정해 보겠습니다.confirm또는alert박스. 사용자는 버튼을 클릭하고,alert사용자가 툴팁을 표시할 수 없을 정도로 빠르게 눌렀습니다(지금까지 양호).

사용자가 를 누릅니다.alert상자 확인 버튼을 클릭하면 마우스가 요소를 종료합니다.그러나 브라우저 페이지가 잠긴 상태이기 때문에 OK 버튼을 누를 때까지 Javascript가 실행되지 않습니다. 즉,mouseleave이벤트가 발생하지 않습니다.사용자가 OK(확인)를 누른 후 도구 설명이 팝업됩니다(사용자가 원하는 것이 아님).

사용.mouseout이 경우에는 발사되기 때문에 적절한 해결책이 될 것입니다.

jQuery API 문서:

mouseout

이 이벤트 유형은 이벤트 버블로 인해 많은 두통을 일으킬 수 있습니다.예를 들어, 이 예에서 마우스 포인터가 Inner 요소 밖으로 이동하면 마우스 아웃 이벤트가 해당 요소로 전송된 다음 Outer로 유입됩니다.이로 인해 부적절한 시간에 바인딩된 마우스 아웃 핸들러가 트리거될 수 있습니다.유용한 대안은 .mouse leave()에 대한 토론을 참조하십시오.

그렇게mouseleave는 위의 이유로 설계된 사용자 지정 이벤트입니다.

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

이벤트 마우스 아웃은 마우스가 선택한 요소를 벗어날 때 트리거되며 마우스가 하위 요소를 벗어날 때도 트리거됩니다.

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

참조: W3 School

jquery 대신 plan javascript를 사용하여 비슷한 문제를 겪었지만, 그것들은 다소 관련이 있으며, 요즘 다른 사람이 검색을 할 경우를 대비하여 제 2센트를 남길 것입니다.

나는 그것을 사용하려고 했습니다.mouseout이벤트를 표시할 수 있습니다.는 모님입니다.div의 목록으로 구성된 하위 메뉴가 있습니다.uls 소요탐으로 때div은 은요을소들이 입니다.mouseout이벤트가 발생했습니다.이것은 제가 원하는 출력이 아니었습니다.

문서에서

하위 요소가 요소의 표시 영역을 가리기 때문에 커서가 하위 요소를 입력하는 경우에도 요소에 마우스 아웃이 전달됩니다.

그리고 그것이 문제였습니다.

그mouseleave이벤트에 이 문제가 없습니다.그것을 사용하는 것만으로도 저는 일을 잘 할 수 있었습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event

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