JavaScript에서 마우스 위치를 어떻게 추적할 수 있나요?

JavaScript에서 마우스 위치를 추적하는 방법

마우스 위치를 추적하려면 마우스 커서의 좌표를 보고하는 mousemove와 같은 이벤트 수신이 필요합니다. 이러한 이벤트를 처리하면 현재 위치를 주기적으로 검색하고 표시할 수 있습니다.

다음 솔루션은 창에 연결된 mousemove 이벤트를 활용합니다.

document.onmousemove = handleMouseMove;

function handleMouseMove(event) {
  var posX = event.pageX;
  var posY = event.pageY;

  console.log(`Current Position: ${posX}, ${posY}`);
}

설명:

1. onmousemove 이벤트 리스너는 문서 객체에 할당되어 전체 마우스 움직임을 수신합니다.
2. mousemove 이벤트가 발생하면 handlerMouseMove 함수가 실행됩니다.
3. 함수 내부에서는 event.pageX 및 event.pageY를 ​​사용하여 마우스 위치를 검색하는 이벤트 객체가 활용됩니다.
4. 얻은 좌표는 콘솔에 기록되며 브라우저의 JavaScript를 사용하여 볼 수 있습니다. console.

타이머를 사용한 대체 솔루션:

마우스 위치를 주기적으로 업데이트하는 솔루션이 필요한 경우 위 코드를 타이머 기능과 결합할 수 있습니다. :

var mousePos;

document.onmousemove = handleMouseMove;
setInterval(getMousePosition, 100); // Update every 100ms

function handleMouseMove(event) {
  mousePos = {
    x: event.pageX,
    y: event.pageY,
  };
}

function getMousePosition() {
  if (!mousePos) {
    // Handle case where mouse position has not been set yet
  } else {
    // Use the stored mousePos.x and mousePos.y values
  }
}

참고: 처리를 일정 기간 내에 유지하는 것이 중요합니다. 브라우저에 부담을 주지 않도록 이벤트 핸들러 또는 타이머 기능을 최소화합니다. 복잡한 계산이나 업데이트를 수행하기 전에 위치가 변경되었는지 확인하여 코드를 최적화하는 것이 좋습니다.

위 내용은 JavaScript에서 마우스 위치를 어떻게 추적할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!