2012-12-02 5 views
2

메신저 그래서 대부분의 웹 dev에 물건을 친절하게 일부 지원을 요청합니다. 별도의 div에 여러 내용을 트리거하는 여러 영역이 할당 된 이미지 맵이 있습니다. 이제는 onmouseover 트리거에 지연을 추가하여 실수로 사용자가 커서를 가리 키지 않고 영역에 커서를 놓으면 div의 내용 만 업데이트됩니다. 지연 onmouseover 자바 스크립트

function showHideDivs(indx){ 
hideDivs(); 
oShowHideDivs[indx].style.display = 'block'; 
} 

function hideDivs(){ 
for(i=0; i < oShowHideDivs.length; i++){ 
    oShowHideDivs[i].style.display = 'none'; 
} 
} 

window.onload=function(){ 
oShowHideDivs = document.getElementById('container').getElementsByTagName('div'); 
var oMap = document.getElementById('myMap'); 
for(i=0; i < oMap.areas.length; i++){ 
    oMap.areas[i].indx = i; 
    oMap.areas[i].onmouseover=function(){ 
     showHideDivs(this.indx); 
    } 
    } 
} 

그래서 내가 어떻게 지연과 장소를 구현합니까 :

은 DIV의 내용을 토글 내가 사용하는 JS입니까? 사전에! 1월

편집 : 내가 지금이 방법을 사용 :

oMap.areas[i].onmouseover=function(){ 
var area=this; 
var delay=setTimeout(function(){showHideDivs(area.indx);},100); 
area.onmouseout=function(){clearTimeout(delay);}; 
} 

나에게 가장 쉬운 것 같았다. 힌트를 위해 thx!

+0

jQuery를 사용 하시겠습니까? [이 질문에 대한 답변] (http://stackoverflow.com/questions/10933828/a-function-to-check-if-the-mouse-is-still-hovering-an-element-every-10-milliseco)와 [이 jsfiddle] (http://jsfiddle.net/z8yaB/). – rosshamish

답변

1

가장 쉬운 방법은 마우스 오버에 타임 아웃을 포함하고,로 마우스를 취소하는 것입니다.

oMap.areas[i].onmouseover=function(){ 
    var area=this; 
    var delay=setTimeout(function(){showHideDivs(area.indx);},100); 
    area.onmouseout=function(){clearTimeout(delay);}; 
} 

더 복잡한 시나리오의 경우 hoverintent과 같은 플러그인을 사용하십시오.

0

특정 지연 후 함수 showHideDivs()을 호출하려면 setTimeout()을 사용해야합니다. 그리고 지연이 끝나기 전에 사용자가 마우스를 움직이면이 함수가 호출되지 않도록합니다. 구체적인 예를 들어 여기

봐 : https://stackoverflow.com/a/6231142/1606729