JavaScript_Basic 지식을 기반으로 마우스 클릭 위치 좌표를 구하는 방법

일부 DOM 작업에서는 요소의 위치를 ​​다루는 경우가 많습니다. 마우스 상호작용은 자주 사용되는 측면입니다. 실망스러운 점은 브라우저마다 결과가 다르며 결과적으로 이 기사에서는 그렇지 않을 수도 있다는 것입니다. 마우스 클릭 위치 좌표 획득에 대한 몇 가지 간단한 요약 코드가 IE8, FireFox 및 Chrome에서 테스트되고 호환된다는 특별한 설명은 없습니다

마우스 클릭 위치 좌표

화면 기준

위치를 결정하기 위해 마우스 클릭이 포함된 경우 상대적으로 간단합니다. 마우스 클릭 이벤트를 얻은 후 screenX 및 screenY 이벤트는 화면의 왼쪽 및 위쪽 여백을 기준으로 클릭 위치를 얻습니다. 다양한 브라우저 성능은 상당히 일관됩니다.

코드 복사 코드는 다음과 같습니다.

function getMousePos(event) {
var e = event || window.event;
브라우저 창을 기준으로 {'x':e.screenX,'y':screenY}
}

반환

간단한 코드를 구현할 수 있지만 이것만으로는 충분하지 않습니다. 왜냐하면 대부분의 경우 브라우저 창을 기준으로 마우스 클릭 위치의 좌표를 얻고 싶기 때문입니다. 이벤트의 clientX 및 clientY 속성은 각각 마우스 클릭 위치가 문서의 왼쪽 여백과 위쪽 여백을 기준으로 함을 나타냅니다. 마찬가지로 우리는 다음과 같은 코드를 작성했습니다.

코드 복사 코드는 다음과 같습니다.

function getMousePos (이벤트) {
      var e = event || window.event;
                return {'x':e.client 🎜>상대 문서

있습니다 간단한 테스트에는 문제가 없지만 clientX와 clientY는 페이지 스크롤 요소를 무시하고 현재 화면을 기준으로 좌표를 얻습니다. 이는 여러 조건에서 매우 어렵습니다. 그러나 페이지 스크롤, 즉 기준 좌표를 고려해야 하는 경우는 어떻습니까? 문서(본문 요소)? 스크롤 변위를 추가하기만 하면 됩니다. 다음으로 페이지의 스크롤 변위를 계산해 보겠습니다.
사실 Firefox에서는 pageX 및 pageY 속성을 지원하므로 문제는 훨씬 더 간단합니다. 이 두 속성은 이미 페이지 스크롤을 고려합니다. Chrome에서는 document.body.scrollLeft 및 document.body.scrollTop을 통해 페이지 스크롤 변위를 계산할 수 있고 IE에서는 document.documentElement.scrollLeft 및 document.documentElement.scrollTop을 사용할 수 있습니다


코드 복사

코드는 다음과 같습니다.function getMousePos(event) { var e = event || window.event; var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;

var scrollY = document.documentElement.scrollTop || document.body.scrollTop;

var x = e. pageX || e.clientX scrollX;
var y = e.pageY || e.clientY scrollY;
//alert('x: ' x 'ny: ' y);
return { 'x ': x, 'y': y };
}