크롬의 자바 스크립트

div가 onmouseover이고 패널이 표시되고 onmouseout이 사라집니다. 자바 스크립트 코드는 다음과 같습니다 :크롬의 자바 스크립트

function ShowPanel() { 
    document.getElementById("thePanel").style.display = "inline"; 
} 

function HidePanel() { 
    document.getElementById("thePanel").style.display = "none"; 
}

코드는 Firefox와 IE에서 완벽하게 작동합니다. 문제는 크롬입니다. 마우스가 패널의 텍스트 상자에 올 때까지 작동합니다. 마우스가 텍스트 상자로 이동하면 onmouseout 이벤트가 호출됩니다. 텍스트 상자는 패널의 일부이므로 열려 있어야합니다.

출처

2011-03-22 Lilz

에서

document.getElementById('outer').addEventListener('mouseout', function(ev) { var el = ev.toElement; while (el && el !== document.body) { if (el === this) { console.log('mouseout ignored'); return; // enclosed - don't do anything } el = el.parentNode; } console.log('mouseout'); }, false);

데모. 패널에 onmouseover가 표시됩니다. 표시되는 위치는 어디입니까? 마크 업 모양이 어때? –

필요한 것은 onmouseover 대신 onmouseover 및 onmouseleave 대신 onmouseenter 이벤트의 동작입니다. 문제는 해당 이벤트가 IE에서만 작동한다는 것입니다. 실제로 해당 이벤트는 올바르게 작동합니다. 당신은 다른 브라우저에서 이벤트 처리의 모든 차이점을 고려하여 그 행동을 시뮬레이션하거나, 단지 당신을 위해 그것을 돌볼 좋은 JavaScript 라이브러리를 사용해야합니다. 예를 들어, jQuery는 기본적으로 이러한 이벤트를 지원하지 않는 브라우저에서 시뮬레이션 된 .mouseenter() 및 .mouseleave()을 가지고 있으며 동시에 두 가지를 동시에 설정하는 멋진 바로 가기 .hover()을 가지고 있습니다.

서로 다른 브라우저의 이벤트 모델의 모든 단점과 불일치를 정말로 알지 못한다면 수동으로하지 않는 것이 좋습니다.하지만이 질문을 한 이후로는하지 않습니다.하지만 jQuery의 작동 방식을보고 싶다면 수동으로 수행하지 않는 것이 좋습니다. events.js을보고 mouseenter 및 mouseleave을 검색하십시오.

출처

2011-03-22 09:36:44 rsp

크롬에서 찾은 것처럼 mouseout 이벤트는 처리기가 등록 된 상위 요소와 그 안에 포함 된 하위 요소에서 이동할 때마다 발생합니다.

간단히 해결하면 jQuery가 지원되지 않는 브라우저에서 mouseleave 이벤트 (해당 문제가 발생하지 않음)를 시뮬레이트합니다.

또는 mouseout 처리기에서 이벤트의 toElement 속성을 살펴보고 상위 목록을 탐색하여 원래 상위 항목이 해당 목록에 있는지 확인하십시오. 목록에없는 경우에만 작업을 처리하십시오. 이것은 나에게 매우 명확하지 않다 http://jsfiddle.net/raybellis/s4EQT/

출처

2011-03-22 10:01:57 Alnitak

이것은 여전히 불행히도 차이가 없습니다 – Lilz

@Lilz : 어떤 부분이 달라지지 않습니까? 나는 jsfiddle을 테스트했으며 div 내에서 마우스 아웃 이벤트를 무시함으로써 완벽하게 작동합니다. 어쩌면 당신은 당신의 문제에 그것을 적용하는 방법을 이해하지 못할 수도 있습니다. –

크롬의 자바 스크립트

답변

관련 문제