아래쪽 div에서 마우스 이동 이벤트, 위쪽 마우스 클릭

Question

그런 기능을 어떻게 구현했는지 생각해보십시오. 나는 그런 방식이 개 절대적으로 배치 된 div 있습니다

그리고 제가하고 싶은 것은 그 div1은 마우스 클릭에 마우스 오버와로 마우스 이벤트와 DIV2을 수신하는입니다. div2에서 마우스를 움직이면 div1에서 mouseout 이벤트가 발생하고 싶지 않습니다. 해당 사용자가 div1에 대한 커서 이동을 div2 mouseout을 트리거하지 않고 (div1이 div2 뒤에 있으므로 실제로 사용자가 커서를 이동하지 않았 음) div2를 클릭하면 커서를 div2로 이동할 수 있습니다.

저는 jQuery를 사용하지 않고 있지만 누군가 jQuery에서이를 수행하는 방법을 알려주고 jQuery가 이러한 문제를 처리하는 방법에 대한 세부 정보를 추가 할 수 있습니다.하지만 그 대답도 마음에들 것입니다.)하지만 여전히 jQuery 무료 대답을 선호합니다.

Answer 1

mouseout 기능은 작동하도록 설계되었습니다. DIV2에 클릭에 대해 돈을 당신이 경험 할 수있는 더 문제를 언급하지만하십시오

당신은

event.relatedTarget != div2 

RGDS이

편집 할 경우 확인하여 mouseOut 이벤트 콜백의 동작을 필터링 할 수 어떤 것이 있어야한다고 생각하지 않습니다.

Answer 2

잘 위치한다면, div1에 대한 mouseout 이벤트에서 마우스의 좌표를 확인할 수 있습니다. div1의 사각형에 있으면 콜백을 호출하지 말아야합니다. mouseout 이벤트의 기능.

Answer 3

고전적인 버블 링/캡처 문제가 발생합니다. 이 문서 밖으로

확인 : http://www.quirksmode.org/js/events_order.html

내가 할 수있는 것보다 훨씬 더 나은 상황을 설명 할 수 있습니다!

다음은 흥분하는 exerpt입니다 :

기본적인 문제는 매우 간단합니다. 당신이 요소

----------------------------------- 
| element1      | 
| -------------------------  | 
| |element2    |  | 
| -------------------------  | 
|         | 
----------------------------------- 

내부의 요소가 모두가 onClick 이벤트 핸들러가 있다고 가정. 사용자가 element2를 클릭하면 의 click 이벤트가 element1과 element2 모두에서 발생합니다. 그러나 어떤 사건이 먼저 발생합니까? 어떤 이벤트가 먼저 실행되어야합니까? 즉, 이벤트가 무엇입니까?

Answer 4

div 1과 div 2를 중첩 할 수 있다고 가정하면 표준 마우스 오버/마우스 출력보다 유용한 IE 독점 mouseenter/mouseleave 이벤트를 에뮬레이트 할 수 있습니다. jQuery에는 .mouseenter()과 .mouseleave()을 통해 에뮬레이트 할 수있는 메소드가 있습니다. 그들의 구현은 당신을 도울 수 있습니다. 여기

는 데모입니다 : http://jsfiddle.net/kXjRM

편집 : 당신이 그렇지 않으면 대신 JS의 CSS를 사용하여 고려 했는가?중첩과 같이 사용

#two { 
    display: none; 
} 

#one:hover #two { 
    display:block; 
} 

?