JS Simulate 버튼을 x 초 동안 마우스 오버를 사용하여 클릭

Question

안녕하세요, 마우스를 가져 가면 js에서 버튼 클릭을 시뮬레이션하려고합니다. 예를 들어 html에서 계산기 구성 요소 (div에있는 버튼 집합)가 있습니다. 내가 달성하려고하는 것은 사용자가 마우스 포인터를 버튼 위로 이동하여 최소한 3 초 동안 머물러있을 때 버튼이 "클릭"되고 거기에 머무른다면 다른 지연이 발생합니다 (반드시 3 초가 아님). 2secs 또는 1sec), 다시 "클릭"됩니다.

은 이미 클릭 키 누르기 이벤트 핸들러하지만 여전히 입력 핸들러 위에 마우스없이 완전 계산기 구성 요소 ..

내가 그 생각에 대한이하는 모습을 만든 뭔가 같은 :

Calculator.mouseoverListener = function(e, calculatorObject){ 
    setTimeout(function(){ 
     value = $(e.target).val(); 
     calculatorObject.handleInput(value); 
    } , 2000); 
    } 

그러나이 (1) 버튼 위로 마우스를 가져 가면 (2) 버튼을 얼마나 오랫동안 가리키더라도 2 초 정도 기다렸다가 '클릭'을 시뮬레이트합니다.

사용할 수있는 방법에 대한 모든 힌트 ?

Answer 1

나는 (죄송합니다, 버그가있을 수 있으므로 테스트하지)과 같이 각각의 각 버튼에 이벤트 리스너 바인딩의 접근이 걸릴 것 : 당신은 대신 setInterval를 사용하여 문제를 해결할 수

var timeoutRef; 

button.addEventListener('mouseover', function (event) { 
    timeoutRef = setTimeout(function() { 
     var newEvent = document.createEvent('UIEvents').initUIEvent('click',true,true,window,1); 
     event.target.dispatchEvent(newEvent); 
    }, 3000); 
}); 

button.addEventListener('mouseout', function (event) { 
    clearTimeout(timeoutRef); 
}); 

Answer 2

을 setTimeout입니다. 두 기능 모두 매우 유사하지만 X 초의 밀리 초마다 반복적으로 동작을 실행합니다 (setInterval).

당신이 당신의 코드에 따라 기능을

var hoverInterval = false; 

Calculator.mouseoverListener = function(e, calculatorObject){ 
    if(hoverInterval) { 
     // interval already active 
     return true; 
    } 

    hoverInterval = setInterval(function(){ 
     value = $(e.target).val(); 
     calculatorObject.handleInput(value); 
    } , 2000); 
} 

실행을 중단 나중에 clearInterval을 사용하실 수 있습니다으로 setInterval의 반환 값은 당신이 다음 < 입력 >에 대한 리스너를 추가 할 필요가 중요하다 요소 마우스 아웃 이벤트가 발생하고 해당 이벤트가 발생하면 이전의 내용을 지우십시오. hoverInterval

계산기 버튼에 'calculatorButton'클래스가 있다고 가정하면 코드는 다음과 같을 수 있습니다.

$('.calculatorButton').mouseout(function() { 
    if(hoverInterval) { 
     clearInterval(hoverInterval); 
    } 
});