JavaScript의 onmouseout 이벤트가 예상대로 작동하지 않습니다.

Question

동적으로 생성 된 HTML 요소에서 사용할 때 onmouseout 이벤트에 문제가 있습니다.

<div id="imageWrapper"> 
    <img src="imageUrl" alt=""> 
</div> 

이 자바 스크립트 코드 외 part의이다 (jQuery 1.7.2 사용) : 분명히

$('body').on('mouseout', 'div#imageWrapper', function() { 
    alert("Test"); 
}); 

, 내가 원하는 것은 때 마우스 잎을 검출하는

이

는 HTML 코드 div#imageWrapper 및 경고 메시지를 표시합니다.

그리고 그것은 작동하지만, 나는 그것이 작동 할 것으로 예상하지 :

는 마우스가 표시에게 경고를 수행하는 div#imageWrapper가 떠날 때,하지만 div 내부에 마우스가 img 요소를 통해 갈 때, 너무 표시합니다 (마치 img 요소가 div의 "바깥 부분"인 것처럼). 이상한 점은 마우스가 이미지를 떠날 때 (그러나 마우스가 div에 남아있을 때) 경고 메시지도 표시된다는 것입니다.

결론 : 자바 스크립트 처리 모두 div#imageWrapperdiv#imageWrapper 두 별개의 내부로 img 요소이다.

누구든지 해결 방법을 알고 있습니까?

감사합니다. 대신

Answer 1

사용 mouseenter 및 mouseleave는 :

$('body').on('mouseleave', 'div#imageWrapper', function() { 
    alert("Test"); 
});