2016-12-23 8 views
0

아래로 마우스 클릭과 마우스 사이의 차이 - 그 마우스 클릭 한 번만 발생하지만 마우스를 아래로 모든 내 마우스 틱 발생은 여기로마우스 홀드 이벤트

내 간단한 예제입니다 - 이벤트가 한 번만 발생하는 이유는 마우스 그것은 한 번만 'HH'을 기록

<canvas id="drawhere" onmousedown="console.log('HH')" width="600" height="500"></canvas> 

을 클릭하지 그러나 나는 아래로 마우스를 사용하고, 모르는! 마우스를 위아래로 다시 - 내 마우스가 다운로 모든 틱을 작성해야 다시

그것을 쓰기 - 내가 jQuery를 사용하지 않는 도움 :))

, 자바 스크립트 만

document.getElementById("drawhere").addEventListener("mousemove", function(){ 
    console.log("mouse event!"); 
}); 

작업 펜 : 대신 "onMouseover와" "으로 onMouseMove"

+0

정의하십시오 무엇 "진드기"를 부르고있다. –

+1

['mousedown'] (https://developer.mozilla.org/en-US/docs/Web/Events/mousedown)은 사용자가 버튼을 누를 때만 트리거됩니다. 계속해서 발사하지 않습니다. –

답변

1

mouseup and mousedown은 계속해서 발사한다고 가정하지 않습니다. 그들은 하나의 행동이 일어 났음을 알리기위한 것입니다.

그러나, 사용자 정의 타이머이 효과를 얻을 수있다 (setInterval() 구체적으로) 그 mouseupmousedown 트리거 및 취소 :

document.getElementById("main"); 
 

 
// Variable to hold a reference to the timer 
 
var timer = null; 
 

 
// Set up an event handler for mousedown 
 
main.addEventListener("mousedown", function(evt){ 
 
    // Start a timer that fires a function at 50 millisecond intervals 
 
    timer = setInterval(function(){ 
 
    // the function can do whatever you need it to 
 
    console.log("Mous is down!"); 
 
    }, 50); 
 
}); 
 

 

 
// Set up a custom mouseup event handler 
 
main.addEventListener("mouseup", function(evt){ 
 
    // Cancel the previously initiated timer function 
 
    clearInterval(timer); 
 
    
 
    // And, do whatever else you need to: 
 
    console.log("Mouse is Up!"); 
 
}); 
 

 
// Set up a custom mouseleave event handler so that 
 
// if the mouse is dragged out of the original element 
 
// and then the mouse is released, the timer will stop 
 
main.addEventListener("mouseleave", function(evt){ 
 
    // Cancel the previously initiated timer function 
 
    clearInterval(timer); 
 
    
 
    // And, do whatever else you need to: 
 
    console.log("Mouse is no longer on element!"); 
 
});
#main { 
 
    background-color:yellow; 
 
    width: 300px; 
 
    height: 100px; 
 
}
<div id="main">Press and hold the mouse down inside me!</div>

+0

내 효과를 얻는 데 가장 좋은 답변입니다. 감사합니다. –

+0

누락 된 한가지가 있습니다. 마우스를 눌렀을 때> 상자 밖으로 드래그했습니다. > 마우스를 놓았습니다. 마우스를 위로 돌리면 main이 실행되지 않고 console.log는 무한대가됩니다. 마우스를 위로 움직이면 활성 마우스가 아래쪽으로 향하고 초점 영역도 확인되어야한다고 생각합니다. – GeekAb

+0

참,하지만 질문에 지정된 요구 사항이 아닙니다. 나는 그 시나리오를 수용하기 위해 대답을 업데이트했다. –

0

사용하고 난 당신이 자바 스크립트 코드에서이 같은 함수를 사용하는 것이 좋습니다 http://codepen.io/parzibyte/full/ENzjvW/

+0

마우스 버튼을 계속 누르고있는 동안 마우스가 움직이지 않으면 코드 펜에 그걸 보여 주면'mousemove'가 작동하지 않습니다. –

+0

아니요 - 우리는 마우스 클릭과 관련된 이벤트에 대해 이야기합니다 - 이동 또는 이벤트 이상 –