2010-02-08 6 views
3

일부 하위 요소가있는 요소가 있습니다. 마우스가 부모 요소를 떠날 때 나는 부모를 숨기고 그것은 자식이다. 문제는 내가 자식 위로 마우스를 가져 가면 mouseout 이벤트가 발생한다는 것입니다. 이것을 방지하는 가장 좋은 방법은 무엇입니까? 마우스가 부모 내에 있지 않거나 자식이 자식 일 때만 이벤트를 실행하고 싶습니다. (캐치되는 위치)Javascript MouseOver/MouseOut children 이벤트

+2

mouseleave 대에 간다. 'mouseenter'와'mouseleave'는 당신이 묘사하는 방식으로 기능하지 않기 위해 특별히 고안되었습니다. –

+0

그래, 내 잘못이야. 나는 mouseover/mouseout을 의미합니다 – Matt

+0

이것은 [Onmouseover child div 문제 및 이벤트 버블 링]과 매우 유사합니다. (http://stackoverflow.com/questions/2206828/onmouseover-child-div-problem-and-event-bubbling) 나 [대답] (http://stackoverflow.com/questions/2206828/onmouseover-child-div-problem-and-event-bubbling/2206875#2206875) – meouw

답변

3

이 행사는

당신은 리스너를 추가하고이 전파 정지함으로써 아이들의 이벤트를 잡을해야 부모에게 아이로부터 버블 링됩니다.

이 코드는 부모의 핸들러에

function onMouseLeave(e) 
{ 
    if (!e) var e = window.event; 
    e.cancelBubble = true; 
    if (e.stopPropagation) e.stopPropagation(); 
} 

질문을 버블 링에서 이벤트를 중지 : 마우스 오프 이벤트가 부모에 의해 발사되고, 말아야 때. 자식을 마우스로 가져 가면 부모로부터 마우스가 나오지 않아야합니다. 어떻게 우리가 이것을 막을 수 있습니까?

3

상위 요소에만 연결된 mouseout 처리기 만 있으면됩니다. 그러나 ...

부모 중 하나가 실제로 자식 이벤트에서 버블 링하는 것과 대조적으로 mouseout 이벤트의 대상인지 확인해야합니다. event.target (W3C) 및 event.srcElement (IE)를 확인하십시오.

또한 마우스를 입력 할 요소가 상위의 하위 요소가 아닌지 확인해야합니다. event.relatedTarget (W3C) 및 event.toElement (IE)를 확인하십시오. http://api.jquery.com/mouseover/에서

1

: 포인터뿐만 아니라 자식 요소로 이동

mouseover 화재, 잠시 mouseenter 화재에만 바운드 요소로 포인터를 이동합니다.

와 같은 내가 당신이`mouseover` /`mouseout`에 문제가 발생하는 것을 의미 생각 mouseout