마우스 위치를 얻는 js에 대한 자세한 설명 example_javascript 기술

이 기사의 예에서는 js에서 마우스 위치를 얻는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

자바스크립트를 사용하여 현재 페이지에서 마우스(커서) 위치를 얻는 방법은 드래그 앤 드롭, 툴팁 등 다양한 상황에서 사용됩니다. 물론 여기서는 여전히 브라우저 호환성 문제에 직면해야 합니다. 다양한 브라우저는 이러한 관련 속성을 다르게 처리합니다. 다음은 브라우저가 이러한 속성을 처리할 때의 차이점과 최종 솔루션에 대한 자세한 소개입니다.

자바스크립트 코드는 다음과 같습니다.

<script type="text/javascript">
// 说明：获取鼠标位置
// 整理：http://www.codebit.cn
// 来源：http://www.webreference.com
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
</script>

사용방법:

document.onmousemove = mouseMove;
function mouseMove(ev){
 ev = ev || window.event;
 var mousePos = mousePosition(ev);
}

코드에 대한 자세한 설명은 다음과 같습니다.

먼저 evnet 개체를 선언해야 합니다. Internet Explorer에서는 이벤트가 전역 변수이며 window.event에 저장됩니다. Firefox나 기타 브라우저에서는 해당 기능을 통해 이벤트를 획득합니다. document.onmousemove에 mouseMove 함수를 할당하면 mouseMove는 마우스 이동 이벤트를 받게 됩니다.

ev가 모든 브라우저에서 이벤트 이벤트를 얻으려면 ev에 이미 값이 할당되어 있으므로 Firefox에서는 "||window.event"가 작동하지 않습니다. MSIE에서는 ev가 비어 있으므로 window.event가 표시됩니다.

이 기사에서는 마우스 위치를 여러 번 얻어야 하기 때문에 이벤트 매개변수가 하나 포함된 mousePosition 함수를 설계했습니다.

MSIE 및 기타 브라우저에서 실행할 예정이므로 Firefox 및 기타 브라우저에서는 500*500 창과 마우스가 있는 경우 문서를 기준으로 마우스의 위치를 ​​나타내기 위해 event.pageX 및 event.pageY를 ​​사용합니다. 절대적으로 중간에 있으면 pageX와 pageY의 값이 모두 250이고, 500 아래로 스크롤하면 pageY가 750이 됩니다.

MSIE는 그 반대입니다. event.clientX와 event.clientY를 사용하여 마우스가 문서가 아닌 창의 위치와 동일함을 나타냅니다. 동일한 예에서 500 아래로 스크롤하면 clientY는 여전히 250이므로 문서와 관련된 scrollLeft 및 scrollTop 속성을 추가해야 합니다. 마지막으로 MSIE의 문서는 0,0에서 시작하지 않지만 일반적으로 작은 테두리(보통 2픽셀)를 갖습니다. 테두리 크기는 document.body.clientLeft 및 clientTop에 정의됩니다.

전체 코드:

<script type="text/javascript">
// 说明：获取鼠标位置
// 整理：http://www.codebit.cn
// 来源：http://www.webreference.com
function mousePosition(ev){
   if(ev.pageX || ev.pageY){
     return {x:ev.pageX, y:ev.pageY};
   }
   return {
     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
     y:ev.clientY + document.body.scrollTop - document.body.clientTop
   };
}
document.onmousemove = mouseMove;
function mouseMove(ev){
 ev = ev || window.event;
 var mousePos = mousePosition(ev);
   document.getElementByIdx('mouseXPosition').value = mousePos.x;
   document.getElementByIdx('mouseYPosition').value = mousePos.y;
}
</script>

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.