div_javascript 스킬에서 javascript의 onmouse 이벤트가 실패하는 문제에 대한 해결 방법

즉, 해당 개체의 하위 개체로 이동하는 것도 마우스아웃 시 간주됩니다. 그러나 이는 우리가 원하는 원하는 효과를 얻지 못하는 경우가 많습니다. 이는 JavaScript 자체의 버블링 특성 때문입니다(즉, 이벤트가 하위 요소에서 트리거되고 상위 요소로 버블링됩니다 - 스택 후입선출 알고리즘). 오늘 온라인으로 검색한 결과 다음 솔루션(IE 및 Firefox와 호환 가능)을 찾았습니다.
IE에서 문제를 해결하는 것은 매우 간단합니다. onMouseOver 및 onMouseOut 대신 onMouseEnter 및 onMouseLeave를 사용하면 됩니다. 기능은 기본적으로 동일하지만 전자는 버블링되지 않습니다(jQuery의 이벤트 이벤트를 사용하는 경우 mouseleave 및 mouseenter 그게 다입니다). 그러나 Firefox에는 onMouseEnter 및 onMouseLeave 이벤트가 없습니다. 그러면 IE와 Firefox의 호환성 문제를 해결하기 위해 순수 js만 사용할 수 있습니다.
원리: onMouseOut 이벤트가 트리거된 후 마우스로 도달한 요소가 상위 요소 정보 표시줄(div)에 포함되는지 여부를 판단합니다. 그렇다면 마우스가 여전히 정보 표시줄(div)에 있으면 숨겨지지 않는다는 의미입니다. 그렇지 않은 경우 마우스가 실제로 정보 표시줄(div) 밖으로 이동했다는 의미이며 정보 표시줄이 숨겨집니다.

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

// 먼저, 트리거하는 요소를 가져옵니다. onMouseOut 이벤트, IE Firefox에서는 이벤트의 toElement 속성을 통해 가져옵니다. Firefox에서는 이벤트의 관련Target 속성을 통해 가져옵니다.
IE: event.toElement, Firefox: event.관련Target(참고: Firefox의 이벤트는 함수 호출 시 전달되어야 하며, IE의 이벤트는 window.event 시스템 개체를 통해 직접 얻을 수 있습니다.)
// ① 다음 단계는 획득한 요소가 메인 div의 하위 요소인지 확인하는 것입니다. (IE에서는 해당 요소의 obj.contains(element) 메소드를 통해 확인할 수 있지만 Firefox에서는 그러한 메소드가 없습니다. 이므로 Firefox에 대한 요소의 obj를 정의해야 합니다.
코드는 다음과 같습니다.
if(typeof(HTMLElement)!="undefine") // Firefox용 Contains() 메서드를 정의합니다. IE에는 이미 시스템에 이 메서드가 있습니다.
{
HTMLElement.prototype .contains=function(obj) {
while(obj!=null&&typeof(obj.tagName)!="undefind") { // 루프 비교를 사용하여 obj의 상위 요소인지 확인
if(obj== this) { return true; }
　obj.parentNode;
　 }
return false
}// ② 획득 및 판단 후 IE와 Firefox를 판단하여 처리하며, 브라우저 유형은 navigator.userAgent로 판단합니다.
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE ";
}
if(navigator.userAgent.indexOf("Firefox")>0){
return "Firefox";
}
// ③ 지금까지 모든 문제는 문제를 해결하기 위해 onMouseOut 이벤트가 트리거되면 먼저 여러 브라우저에서 마우스가 도달하는 요소를 가져온 다음 해당 요소가 정보 표시줄(div) 내에 있는지 판단합니다. 하위 요소인 경우 onMouseOut 이벤트가 실행되지 않으며 그 반대의 경우도 마찬가지입니다. 그런 다음 이벤트를 실행하고 정보 표시줄을 숨깁니다.
function hideMsgBox(theEvent){ //theEvent를 사용하여 전달합니다. 이벤트에서 Firefox의 메소드
if (theEvent){
var browser=navigator .userAgent; //브라우저 속성 가져오기
if (browser.indexOf("Firefox")>0){ //If Firefox
if (document.getElementById('MsgBox').contains(theEvent.관련Target)) {//하위 요소인 경우
　 return; //함수 종료
}
}
if (browser.indexOf("MSIE")>0){ //IE인 경우
if (document.getElementById('MsgBox').contains(event.toElement)) { //IE인 경우 하위 요소
return; //함수 종료
}
}
}
/*수행할 작업(예: 숨기기)*/
document.getElementById('MsgBox ').style.display='none' ;
......
}
// ④ 인포메이션 바(Div)에 onMouseOut=hideMsgBox(event)를 설정하여 호출합니다.


또한 window.event.cancelBubble = true(IE)로 설정하면 event.stopPropagation() event.preventDefault()(Firefox)도 문제를 해결할 수 있지만 모든 자식을 순회해야 합니다. 효율성에 영향을 미치는 요소이므로 onMouseOut 이벤트 발생 시 위와 같이 판단하여 별도로 처리하는 것이 더 적절합니다.