자바스크립트 - 화면 좌표 찾기

프로그래밍/JavaScript 자바스크립트 2021. 10. 1.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
* { padding: 0; margin: 0; }
#layout {
	width: 500px; height: 180px; margin: 5px; border: 1px solid #333;
	background: yellow;
	text-align: center;
	padding: 72px 0;
	box-sizing: border-box;
}
</style>
</head>
<body>

<div style="height: 100px; margin: 5px;">
	<h3>screenLeft, screenTop / screenX, screenY</h3>
	<p> 모니터 최상단을 기준으로 좌표 값 </p> 
</div>
<div id="layout"></div>

<hr>
<div id="result" style="margin: 20px;"></div>

<script type="text/javascript">
document.getElementById("layout").onclick = function() {
	var x = event.screenX;
	var y = event.screenY;
	
	var s = "("+x+","+y+")";
	document.getElementById("result").innerHTML = s;
};

</script>

</body>
</html>

여기선 자바 스크립트 코드를 HTML 아래로 빼야 한다.

먼저 작성을 하면 객체를 못찾음

event.screenX;

event.screenY;

는 마우스의 좌표를 알려준다 다만 screen. 으로 시작되면 모니터 크기 상관없이 해상도 따라서

모니터 최상단 좌측을 기준으로 한다.

사진을 보면 빨간곳을 클릭했는데 10,10이 아니라 10,220이 나온 이유가 Y가 모니터 기준으로 들어갔기 때문이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
* { padding: 0; margin: 0; }
#layout {
	width: 500px; height: 180px; margin: 5px; border: 1px solid #333;
	background: yellow;
	text-align: center;
	padding: 72px 0;
	box-sizing: border-box;
}
</style>
</head>
<body>

<div style="height: 100px; margin: 5px;">
	<h3>clientX, clientY</h3>
	<p> document의 가장 위쪽 지점을 기준으로 마우스 좌표(스크롤은 무시) </p> 
</div>
<div id="layout"></div>

<hr>
<div id="result" style="margin: 20px;"></div>

<script type="text/javascript">
document.getElementById("layout").onclick = function() {
	var x = event.clientX;
	var y = event.clientY;
	
	var s = "("+x+","+y+")";
	document.getElementById("result").innerHTML = s;
};

</script>

</body>
</html>

event.clientX

client는

모니터 최상단이 아니라 문서의 최상단 즉 인터넷 창에서 즐겨찾기 바로 밑 부분 이 0이 된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
* { padding: 0; margin: 0; }
#layout {
	width: 500px; height: 180px; margin: 5px; border: 1px solid #333;
	background: yellow;
	text-align: center;
	padding: 72px 0;
	box-sizing: border-box;
}
</style>
</head>
<body>

<div style="height: 100px; margin: 5px;">
	<h3>pageX, pageY</h3>
	<p> clientX, clientY와 동일하지만 스크롤시 스크롤까지 포함한 마우스 좌표 </p> 
</div>
<div id="layout"></div>

<hr>
<div id="result" style="margin: 20px;"></div>

<script type="text/javascript">
document.getElementById("layout").onclick = function() {
	var x = event.pageX;
	var y = event.pageY;
	
	var s = "("+x+","+y+")";
	document.getElementById("result").innerHTML = s;
};

</script>

</body>
</html>

event.pageX; 는 client와 동일하지만 스크롤이 있어서 넘어갈 경우 스크롤 넘어간거 까지 포함함.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
* { padding: 0; margin: 0; }
#layout {
	width: 500px; height: 180px; margin: 5px; border: 1px solid #333;
	background: yellow;
	text-align: center;
	padding: 72px 0;
	box-sizing: border-box;
}
</style>
</head>
<body>

<div style="height: 100px; margin: 5px;">
	<h3>offsetX, offsetY</h3>
	<p> 이벤트를 발생한 요소 내부의 마우스 좌표 </p> 
</div>
<div id="layout"></div>

<hr>
<div id="result" style="margin: 20px;"></div>

<script type="text/javascript">
document.getElementById("layout").onclick = function() {
	var x = event.offsetX;
	var y = event.offsetY;
	
	var s = "("+x+","+y+")";
	document.getElementById("result").innerHTML = s;
};

</script>

</body>
</html>

event.offsetX 는 이벤트가 발생 되는 곳을 기준으로 한다.

즉 노란박스 영역 하나로 끝난다는뜻

노란 박스의 최상단 좌측이 0,0 임.

저작자표시

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

자바스크립트 - Event 이벤트 핸들러 (0)	2021.10.02
자바스크립트 - navigator (0)	2021.10.01
자바스크립트 - form에 접근하기 (0)	2021.10.01
자바스크림트 - BOM (0)	2021.09.30
자바스크립트 - JSON 데이터 객체로 변환하기 (0)	2021.09.30

ABOUT ME

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바