DIV 요소가 있다는 얘기가 나와서 말인데, 내부에는 IMG 요소와 SPAN 요소가 있습니다. 이 두 내부 요소가 어떻게 배열되는지는 걱정하지 마세요. 이 부분은 제가 논의하고 싶은 핵심이 아닙니다.
특수 효과를 얻으려면 TD의 onmouseover와 onmouseout 이벤트를 사용해야 하며, 테스트할 때 다음과 같은 상황을 발견할 것입니다:
마우스가 DIV 내부로 이동하면 onmouseover 이벤트가 트리거됩니다; 그 다음 마우스를 DIV 내부의 IMG 또는 SPAN 요소로 이동시키면, 마우스가 DIV 외부로 이동했다고 확신하지 않지만, 이상한 점은 onmouseout 이벤트가 즉시 트리거된다는 것입니다.
이건 제가 원하는 바가 아니라서, 내부 요소들이 외부 요소로 가져오는 Javascrip{filtering}t 이벤트의 간섭을 어떻게 "차단"할 수 있을까요?
다음은 두 가지 방법입니다:
1. setTimeout
마우스가 내부 요소 위로 이동해 외부 요소의 onmouseout 이벤트를 트리거하면, 외부 요소의 onmouseover도 즉시 트리거되기 때문에, 외부 요소의 onmouseout 이벤트가 실행되어야 하는 동작을 잠시 지연시키고, onmouseover 이벤트에서 clearTimeout 메서드를 실행하면 내부 요소로 인한 이벤트 간섭을 피할 수 있습니다.
특정 실행 과정에 대해서는 다음 그림을 참고하세요(세로 점선은 시간을 나타냅니다):
이 방법은 영리한 방법인데, onmouseout이 트리거되면 실질적인 메서드가 즉시 실행되지 않고 짧은 시간 동안 기다리기 때문입니다. 이 시간 동안 onmouseover 이벤트가 즉시 트리거된다면, 내부 요소의 간섭으로 인해 onmouseout 이벤트가 트리거된 것이 거의 확실하므로, onmouseover 이벤트에서 clearTimeout을 사용해 지연된 메서드가 실행되지 않도록 하세요.
2. 포함
onmouseover에서 다음과 같은 판단을 내리고, 결과가 참일 때 메서드 본체를 실행하세요:
onmouseout에서 다음과 같은 판단을 내리고, 결과가 참일 때 메서드 본을 실행하세요:
위 두 줄의 코드의 의미에 대한 설명은 다음과 같습니다:
IE에서는 모든 HTML 요소가 현재 요소에 지정된 요소를 포함하는지 결정하는 contain 메서드가 있습니다. 이 방법을 사용하여 외부 요소의 이벤트가 내부 요소에 의해 트리거되는지, 내부 요소가 원치 않는 이벤트를 유발하면 이 이벤트를 무시합니다.
event.fromElement는 onmouseover와 onmouseout 이벤트가 트리거될 때 마우스가 떠나는 요소를 가리키며; event.toElement는 onmouseover와 onmouseout 이벤트가 트리거될 때 마우스가 들어가는 요소를 가리킵니다.
위 두 줄의 코드의 의미는 다음과 같습니다:
- onmouseover 이벤트가 트리거되면, 마우스가 남긴 요소가 현재 요소의 내부 요소인지 판단하고, 그렇다면 이 이벤트를 무시합니다;
- onmouseout 이벤트가 트리거되면, 마우스가 입력한 요소가 현재 요소의 내부 요소인지 판단하고, 그렇다면 이 이벤트를 무시합니다;
이렇게 하면 내부 요소가 외부 요소의 온마우스오버 및 온마우스아웃 이벤트에 간섭하지 않습니다.
하지만 문제는 다시 말하지만, 비IE 브라우저는 contain 함수를 지원하지 않는다는 점입니다. 하지만 이제 contain 함수의 기능을 알게 되었으니, 비-IE 브라우저에 대한 contain 지원을 추가하기 위해 다음 코드를 추가할 수 있습니다:
위의 방법들은 Firefox와 호환되지 않습니다:
요점은 jQuery입니다:
j쿼리마우스아웃 대신 마우스리브를 사용하세요, 위에서 말한 일이 일어나지 않도록 한다.
또한, 마우스오버는 반복적으로 트리거되니 마우스엔터를 사용하세요.
완벽한 해결책이네~
|
게시됨 2018. 12. 17. 오후 2:57:53
|
|
|
|
