onmouseover click 및 mouseout 이벤트가 시작되기 전에 해지 하시겠습니까?

Question

Unusable links with onmouseover() 흥미로운 질문을 받았는데 대답하려고했을 때. 몇 가지 로깅 실험 후 http://jsfiddle.net/RnGxP/1/을 설정했습니다. 마지막 두 예제는 예상대로 작동하며 "닫기"를 클릭하거나 "닫기"div를 닫을 때 숨 깁니다.

첫 번째 두 예제는 마우스가 움직일 때마다 으로 새 innerHTML을 설정합니다. (나는 결코 그렇게하지 않을 것이지만 ...). 그래서 마우스를 움직이면 마우스가 확장됩니다. 링크 또는 "닫기"div에서 마우스를 계속 움직이면 더 많은 이동 이벤트가 시작됩니다.

그러나 두 번째 예제의 닫기 버튼을 클릭하면 마우스를 움직이지 않고 클릭 이벤트 대신 두 번의 mousemove 이벤트가 발생합니다! 정확히 여기서 어떻게됩니까?innerHTML을 재설정 할 때 클릭 이벤트가 어떤 식 으로든 잃어 버렸음을 알 수 있습니까? (대상을 잃어 버렸습니까?) 그러나 앞에 mousemove 이벤트 이 왜 발생합니까?

Answer 1

mouseover 이벤트에서 div 요소의 innerHTML을 다시 쓰고 있습니다. 이 때마다 당신이 그래서 등 등 innerHTML

다시 쓰는 div 요소까지 거품 해당 노드에서 새로운 mouseover 이벤트를 트리거 새 노드, 위로 이동하는 사실에 마우스를 이동한다는 것을 의미 시간에 의해 내부 div에 mouseout 이벤트가 발생이의 mouseover 이벤트가 이미 외부 div에 innerHTML를 다시 작성했다, 그래서 내부 div 부모가없는 ...

은 무엇 당신이 정말로 사용하고자하면 mouseenter 이벤트입니다 (그리고 아마도 mouseleave 이벤트가 내부의 div) b 인터넷 익스플로러가 소유하고 있지만, MDN에 따르면 파이어 폭스 10과 오페라 11.10도 지원한다.