onmouseover 및 onmouseout에 대한 몇 가지 생각_기본 지식

DIV 레이어의 경우 마우스가 안으로 움직일 때 onmouseover가 트리거되고, 마우스가 밖으로 움직일 때 onmouseout이 트리거됩니다.

간단한 논리, 이것이 우리가 원하는 것입니다! 하지만 문제가 발생합니다. onmouseover는 안으로 들어올 때만 트리거되는 것이 아니며, onmouseout은 밖으로 나갈 때만 트리거되는 것이 아닙니다! Onmouseover 또는 onmouseout은 마우스가 DIV 내부에서 움직일 때 트리거될 수도 있습니다.

위 그림에서 'A'의 경우: 마우스가 'A'(경로 '1')에 들어가면 'A'의 onmouseover 이벤트가 트리거되고 마우스가 '로 이동합니다. B'(경로 '2'), 이때 'A'는 onmouseout(첫 번째) 및 onmouseover(마지막) 이벤트를 트리거합니다.

HTML 요소('A' 레이어) 내부에 다른 요소('B', 'C' 레이어)가 있는 경우 이러한 내부 요소로 이동할 때 가장 바깥쪽 레이어가 트리거되는 것을 볼 수 있습니다. . ('A' 레이어) onmouseout 및 onmouseover 이벤트.

이 두 가지 이벤트를 유발하는 행동이 정말 원하는 것인가요? 어쩌면 내부에 다른 요소가 있는지 여부에 관계없이 입주할 때만 실행되는 이벤트와 이사할 때만 실행되는 이벤트가 필요할 수도 있습니다....

해결책

IE에는 실제로 onmouseenter와 onmouseleave라는 두 가지 이벤트가 필요합니다. 아쉽게도 FF 등 다른 브라우저에서는 지원하지 않으므로 구현을 시뮬레이션해야 합니다.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

document.getElementById('...').onmouseover = function(e){
if( !e ) e = window.event
var reltg; e.관련Target ? e.관련Target : e.fromElement;
while( reltg && reltg != this ) reltg = reltg.parentNode;
if( reltg != this ){
// onmouseenter 이벤트에 대한 처리 코드
}
}
document.getElementById('...').onmouseout = function(e){
if( !e ) e = window.event;
var reltg = e.관련Target ? e .관련Target : e.toElement;
while( reltg && reltg != this ) reltg = reltg.parentNode
if( reltg != this ) // 여기에서 onmouseleave 이벤트에 대한 처리 코드를 작성할 수 있습니다.
}
}

참고:

W3C는 마우스오버 및 마우스아웃 이벤트에 관련 타겟 속성을 추가했습니다.

• mouseover 이벤트에서는 마우스가 어떤 요소에서 시작되는지 나타냅니다
• mouseout 이벤트에서는 마우스가 이동하는 요소를 가리킵니다
그리고 Microsoft는 mouseover 및 mouseout 이벤트에 두 가지 속성을 추가했습니다

• 마우스오버 이벤트에서 표현되는 fromElement 마우스가 오는 요소
•toElement는 mouseout 이벤트에서 마우스가 이동하는 요소를 가리킵니다.