JavaScript_javascript 기술을 기반으로 마우스 위치를 얻는 다양한 방법

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

마우스 클릭 위치 좌표

화면 기준

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

function getMousePos(event) {
      var e = event || window.event;
      return {'x':e.screenX,'y':screenY}
    } 

브라우저 창 기준

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

function getMousePos(event) {
      var e = event || window.event;
      return {'x':e.clientX,'y':clientY}
    } 

친족문서

간단한 테스트에는 문제가 없지만 clientX와 clientY는 페이지 스크롤 요소를 무시하고 현재 화면을 기준으로 좌표를 얻습니다. 이는 여러 조건에서 유용하지만 페이지 스크롤을 고려해야 하는 경우, 즉 document(body 요소의 좌표)가 결정되면 어떻게 해야 합니까? 스크롤 변위를 추가하기만 하면 됩니다. 다음으로 페이지의 스크롤 변위를 계산해 보겠습니다.

사실 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 };
    } 

위 내용은 에디터가 소개한 자바스크립트 기반의 다양한 마우스 위치 획득 방법입니다.