Javascript을 통해 마우스 현재 위치를 얻는 구현 방법

때때로, 창을 드래그하거나 마우스를 움직인 거리를 얻고 싶을 때, 마우스의前后 페이지 내 위치를 계산하여 원하는 결과를 얻을 수 있습니다. 몇 가지 이벤트 속성을 소개합니다:

1、고객 구역 좌표 위치

　　마우스 이벤트는 모두 브라우저의 뷰포트에서 특정 위치에서 발생합니다. 이 위치 정보는 이벤트 객체의 clientX와 clientY 속성에 저장됩니다. 이 값은 이벤트가 발생할 때 마우스 포인터가 뷰포트에서의 수평 및 수직 좌표를 나타냅니다(페이지가滚동된 거리를 포함하지 않습니다). 아래 그림을 참조하세요:

var div = document.getElementById("myDiv"); //요소 가져오기
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("화면 좌표: " + event.screenX + " + event.screenY);
});

주의: EventUtil.on()는 요소에 이벤트를 바인딩하는 것을 의미하며, EventUtil.getEvent(event)는 이벤트 객체를 가져오는 것을 의미합니다. EventUtil은 사용자 정의 이벤트 객체(JavaScript로 구현)로, 여러 브라우저 간의 메서드를 포함하고 있습니다. 구체적인 구현은 다른 기사《 Across Browser Event Methods》를 참조하세요. 프로젝트가 jQuery 플러그인을 사용하면, 해당 메서드로 대체할 수 있습니다.

2、페이지 좌표 위치

　　이벤트 객체 속성 pageX와 pageY는 이벤트가 페이지에서 어디서 발생했는지 알려줍니다. 다시 말해, 이 두 속성은 마우스 커서가 페이지에서의 위치를 나타냅니다(창에서의 마우스 위치 좌표와 같습니다) + 페이지가滚동된 거리)。

var div = document.getElementById("myDiv");//id가 "myDiv"인 요소를 가져오기
EventUtil.on(div, "click", function(event){//요소에 click 이벤트를 바인딩합니다
 event = EventUtil.getEvent(event);//event 이벤트 객체를 가져옵니다
 var pageX = event.pageX, pageY = event.pageY;
 if (pageX === undefined){//IE8및 이전 버전
  pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
 }
 if (pageY === undefined){
  pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
 }
 alert("페이지 좌표: " + pageX + " + pageY);
});

3화면 좌표 위치

　　mouse event 발생 시 마우스 포인터가 전체 화면에 대한 좌표 정보를 screenX와 screenY 속성을 통해 정할 수 있습니다. 다음과 같이 보입니다:

var div = document.getElementById("myDiv");
EventUtil.on(div, "click", function(event){
 event = EventUtil.getEvent(event);
 alert("화면 좌표: " + event.screenX + " + event.screenY);
});

이 기사는 《JavaScript 고급 프로그래밍 제3판》에서 인용되었습니다.

읽어주셔서 감사합니다. 여러분의 도움이 되었기를 바랍니다. 여러분의 사이트 지원에 감사합니다!