Javascript : 여러 개의 mouseout 이벤트가 발생했습니다

Question

자바 (WC3 모델과 Microsoft 모델)의 다양한 이벤트 모델과 버블 링 및 캡처의 차이점을 알고 있습니다. 그러나 몇 시간 동안이 문제에 대한 다양한 기사를 읽은 후에도 다음과 같이 간단하게 보이는 동작을 올바르게 코딩하는 방법을 여전히 확신 할 수 없습니다.

div 요소와 div 요소가있는 경우, 마우스가 outer-div를 떠날 때 트리거되는 이벤트. 마우스가 내부 div에서 외부 div로 넘어갈 때 아무 것도 일어나지 않아야하고 마우스가 외부 div에서 내부 div로 넘어갈 때 아무 것도 일어나지 않아야합니다. 이벤트는 만 마우스가 바깥 쪽 div에서 주변 페이지로 이동하면 실행됩니다. 이제

<div id="outer" style = "width:20em; height:20em; border:1px solid #F00" align = "center" onmouseout="alert('mouseout event!')" > 
<div id="inner" style = "width:18em; height:18em; border:1px solid #000"></div> 
</div> 

, 나는 외부 사업부의 "로 마우스를"이벤트, 이로 마우스 이벤트가 해고를 배치하면 때 주위의 페이지 내부-사업부에서 마우스 이동 이벤트가 발생하기 때문에 일단 마우스가 내부에서 외부로 이동하면 다시 한 번, 외부에서 주변 페이지로 이동할 때 다시 한 번 누르십시오.

ev.stopPropagation()을 사용하여 이벤트를 취소 할 수 있다는 것을 알고 있으므로 inner-div에 이벤트 처리기를 등록하여 이벤트 전파를 취소하려고했습니다. 그러나 마우스가 outer-div에서 inner-div로 이동하면 이벤트가 실행되지 않습니다.

그래서 뭔가를 간과하지 않는 한 복잡한 마우스 추적 기능 없이는이 동작을 수행 할 수없는 것처럼 보입니다. 앞으로 JQuery와 같은보다 고급 프레임 워크를 사용하여이 코드를 다시 구현할 계획을 가지고 있습니다.하지만 지금은 일반적인 Javascript에서 위의 동작을 구현할 수있는 간단한 방법이 있는지 궁금합니다.

Answer 1

내부 div의 mouseout 이벤트가 외부 div에 '거품'됩니다. 이 외부 사업부에서 일어난 것을 감지하기 위해, event의 target 재산 확인 :

<div id="outer"> 
    <div id="inner">x</div> 
</div> 

이

document.getElementById('outer').onmouseout= function(event) { 
    // deal with IE nonsense 
    if (event===undefined) event= window.event; 
    var target= 'target' in event? event.target : event.srcElement; 

    if (target!==this) return; 
    ... 
}; 

는 mouseout와 일반적인 문제는 당신이 그것을 얻을됩니다 때 부모의 "OUT"포인터 이동 심지어 아이에게 "들어가는"경우에도 마찬가지입니다. 당신은 마우스로 이동하는 요소의 상위 목록을보고 수동으로이 사건을 감지 할 수 있습니다 :

는

var other= 'relatedTarget' in event? event.relatedTarget : event.toElement; 
    while ((other= other.parentNode).nodeType===1) 
     if (other===this) return; 

이는 mousein/mouseout 모델이다 : 어떤에 대한 요소가 마우스의 바로 위 부모 만 관심이있다. 더 자주 원하는 것은 요소 트리를 전체적으로 고려하는 mouseenter/mouseleave 모델이므로 포인터가 요소 - 또는 - 자손을 떠나 엘리먼트 또는 요소로 직접 이동하지 않을 때만 mouseleave을 얻습니다. 그것의 후손.

불행하게도 mouseenter/mouseleave은 (는) 현재 IE 전용 이벤트 쌍입니다. 바라건대 다른 브라우저가 DOM Level 3 Events의 일부가 될 것으로 예상되므로이 브라우저를 선택하시기 바랍니다.