JavaScript의 SetInterval ()에서 마우스 위치를 캡처합니다

Question

JavaScript에서 마우스 위치에 따라 하나의 div를 움직이는 함수가 있습니다. 이 함수는 setInterval () 함수에 설정되어 매 초마다 실행됩니다. 다음과 같이 마우스 위치를 캡처해야합니다.

function mousemov() {
  document.getElementById("myDiv").style.left = Event.clientX; //don't work
}

window.onload = function() {
  setInterval("mousemov()",1000);
}

추신 : 마우스를 중지하더라도 함수를 실행해야하므로 MouseMove 이벤트를 사용할 수 없습니다.

도움을 주셔서 감사합니다!

Answer 1

이벤트 객체에 액세스 할 수있는 유일한 시간은 이벤트 핸들러를 실행하는 중입니다. 따라서 당신이해야 할 일은 문서에 onMouseMove 이벤트를 만들고 마우스 좌표를 전 세계적으로 접근 가능한 객체에 저장하는 것입니다. 그런 다음 스크립트의 다른 곳 에서이 값에 액세스하여 마우스 위치를 결정할 수 있습니다.

다음은 예입니다 (jQuery를 사용하지 않으므로 직접 DOM 코드입니다) :

document.onmousemove = function(e) {
    var event = e || window.event;
    window.mouseX = event.clientX;
    window.mouseY = event.clientY;
}

function mousemov() {
    document.getElementById("myDiv").style.left = window.mouseX;
}

window.onload = function() {
    setInterval(mousemov, 1000);
}

ClientX와 Client가 스크롤을 고려하지 않는다는 점에 유의해야합니다. 스크롤 오프셋을 검색하고 반환 된 값에 적용해야합니다.

Answer 2

글쎄, 문서의 마우스 움직임을 듣고 위치를 저장하면, 원할 때마다, 예를 들어, 매 초마다 최신 등록 된 마우스 위치가 있습니다.

이것은 jQuery 예입니다

$(document).ready(function()
 {
  $().mousemove(function(e)
   {
       window.mouseX = e.pageX;
       window.mouseY = e.pageY;
  });
});

그리고 당신의 mousemove 기능이 될 것입니다

function mousemov() { 
    document.getElementById("myDiv").style.left = window.mouseX;
}