[JavaScript] 자바스크립트 마우스 좌표 확인하기

115_자바스크립트 마우스 좌표 확인하기

[적용]

• 마우스의 클릭 위치를 확인하고 싶을 때
• 마우스 움직임에 따라 요소를 반응시키고 싶을 때

---

[문법]

속성	내용	타입
event.clientX	브라우저 좌측 상단 기준 X 좌표	숫자
event.clientY	브라우저 좌측 상단 기준 Y 좌표	숫자
event.offsetX	요소 좌측 상단 기준 X 좌표	숫자
event.offsetY	요소 좌측 상단 기준 Y 좌표	숫자
event.pageX	페이지 좌측 상단 기준 X 좌표	숫자
event.pageY	페이지 좌측 상단 기준 Y 좌표	숫자
event.screenX	디바이스 좌측 상단 기준 X 좌표	숫자
event.screenY	디바이스 좌측 상단 기준 Y 좌표	숫자

---

[내용]

click 이벤트와 mousemove 이벤트 등 마우스 조작 이벤트는 MouseEvent의 객체이다.

MouseEvent 객체는 이벤트 발생 시점의 좌표 정보가 포함되어 있으며, 기준 위치에 대해 몇 가지 속성을 가진다.

clientX, clientY, offsetX, offsetY 는 앞서 나온 문법의 설명과 같다.

 

pageX, pageY는 페이지 스크롤 분량의 정보도 포함하며, screenX, screenY는

웹 페이지를 보고 있는 디바이스(컴퓨터, 스마트폰)의 좌측 위를 기준으로 한다.

 

각 속성을 확인하는 방법은 다음과 같다.

// 마우스 이동 시 좌표 출력
targetBox.addEventListener('mousemove', (event) => {
	console.log(event.clientX, event.clientY);
});

---

[예시]

화면에서 마우스를 클릭하면 해당 위치에 따라 캐릭터가 이동하는 샘플을 확인해 보자

 

HTML                                                                                                                                                              index.html

<!-- 캐릭터 이미지-->
<div class=@character"></div>

JavaScript                                                                                                                                                          main.js

/** 캐릭터 이미지 */
const character = document.querySelector('.character');

// 화면에서 마우스 클릭 시 캐릭터 이동 시작
document.addEventListner('mousemove', () ={
	// 마우스 움직임에 따라 캐릭터를 이동
    document.addEventListener('mousemove', onMouseMove);
    
    // 화면에서 마우스 클릭을 떼면 캐릭터 이동이 멈춤
    document.addEventListener('mouseup', () => {
    	document.removeEventListener('mousemove', onMouseMove);
    });
});

/**
* 마우스 움직임에 따른 처리
*/
function onMouseMove(event) {
	character.style.left = `${event.clientX - 100}px`;
    character.style.top = `${event.clientY - 100}px`;
}

 

실행결과

화면에서 마우스 조작 시 커서 움직임에 따라 캐릭터가 이동하다가 

마우스를 클릭하면 캐릭터를 따라 이동하는 것을 멈춘다.

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김