구독자분께서 질문 주셔서 기쁜(?) 마음으로 답변도 드릴겸, 다른 분께도 알려드릴겸 글을 남깁니다 :)
Q
웹브라우저 화면에서 마우스의 위치를 알고 싶습니다. 자바스크립트로 알 수 있나요?
A
네, 가능합니다!
자바스크립트에서는 현재 사용하는 웹브라우저 화면의 마우스 위치를 알 수가 있습니다.
다만 염두에 두실 부분이 있는데요.
화면이 스크롤되지 않았을 때는 아무런 문제가 없습니다.
그런데 화면이 스크롤되었을 때 마우스 좌표는 2가지 계산 방법으로 분리가 됩니다.
첫째는, 마우스 스크롤과 관계없이 무조건 웹브라우저 왼쪽 상단에서부터 떨어진 거리를 측정하는 방법과
두번째는, 웹브라우저 화면을 스크롤한 거리를 감안해서 측정하는 방법이지요..
보통 두번째 방법을 많이 사용하는데요. 페이지 좌표라고 부릅니다.
페이지 좌표를 측정하려면 아래와 같은 코드를 사용하면 되는데요.
jQuery를 이용해 간결하게 표현해보았습니다.
문서 내에서 ( $(document) ) 마우스를 움직일 때 함수가 실행되어 ( mousemove ( (e) => { ... } ) )
현재 마우스 위치를 보관합니다 ( mousepos.x = e.pageX; mousepos.y = e.pageY; )
그리고, 0.1초 간격마다 함수를 실행하여 ( setInterval(()=>{ ... } )
마우스 위치를 지속 표시하는 것이지요 ( $("#mouse_div").html( mousepos.x + "," + mousepos.y ); )
| <body> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> let mousepos={ x:0, y:0 }; $(document).mousemove ( (e) => { mousepos.x = e.pageX; mousepos.y = e.pageY; }); setInterval(()=>{ $("#mouse_div").html( mousepos.x + "," + mousepos.y ); }, 100); </script> <style> #mouse_div { position:fixed; top:0px; left:0px; } </style> <div id='mouse_div'></div> </body> |
그리고 첫번째 방법은 클라이언트 좌표라고 부릅니다.
pageX, pageY 대신 clientX, clientY가 사용되는데요.
아래 소스입니다. 결과물은 같아 보이지만, 내용이 길어 스크롤바가 생길 경우 둘 사이의 좌표는 차이점이 생깁니다.
스크롤바가 생기지 않는 브라우저라면 이 방법을 사용하시면 되지요 :)
| <body> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> let mousepos={ x:0, y:0 }; $(document).mousemove ( (e) => { mousepos.x = e.clientX; mousepos.y = e.clientY; }); setInterval(()=>{ $("#mouse_div").html( mousepos.x + "," + mousepos.y ); }, 100); </script> <style> #mouse_div { position:fixed; top:0px; left:0px; } </style> <div id='mouse_div'></div> </body> |
다만 마우스 위치를 파악하는 데에는 한가지 제약 사항이 있습니다
그것은 웹페이지를 띄운 다음 마우스를 아주 약간이라도 움직이거나 클릭해야 하는 것인데요.
그렇지 않으면 마우스의 좌표를 알 수 없는 제약은 있습니다.
필요하신 분에게 도움이 되시길 바랍니다. 그러면 이만 :)
도움이 되셨다면 공감 한방, 댓글은 굿잡!
감사합니다~
'자바스크립트와 캔버스' 카테고리의 다른 글
| Node.js - Part 10-2. 페이지는 계속 추가할 수 있어요 (14) | 2022.03.08 |
|---|---|
| Node.js - Part10-1. 파일 읽어 뿌려주자(1) (19) | 2022.03.06 |
| 멀티채팅방 기능구현~! (24) | 2021.12.13 |
| jQuery 프로미스 - await 처리 (2) | 2021.09.26 |
| 캔버스와 함께하는 자바스크립트, 13번째 시간 - 3D세계의 창조 (0) | 2019.10.02 |
