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 등 다른 브라우저에서는 지원하지 않으므로 구현을 시뮬레이션해야 합니다.