<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Coordinates</title>
<script src="main.js" defer></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="line horizontal"></div>
<div class="line vertical"></div>
<img class="target" src="img/target.png" alt="target" />
<span class="tag"></span>
</body>
</html>
const vertical = document.querySelector(".vertical");
const horizontal = document.querySelector(".horizontal");
const target = document.querySelector(".target");
const tag = document.querySelector(".tag");
document.addEventListener("mousemove", (event) => {
const x = event.clientX;
const y = event.clientY;
console.log(`${x} ${y}`);
// client => window 위에서 움직이는 좌표를 받음
vertical.style.left = `${x}px`;
// style을 지정할 시 px을 붙여야 함
horizontal.style.top = `${y}px`;
target.style.left = `${x}px`;
target.style.top = `${y}px`;
tag.style.left = `${x}px`;
tag.style.top = `${y}px`;
tag.innerHTML = `${x}px, ${y}px`;
});
MouseEvent.clientX
:이벤트가 발생한 위치의 수평 좌표
MouseEvent.clientY
:이벤트가 발생한 위치의 수직 좌표
mousemove 이벤트가 발생할 때마다 event.clientX, event.clientY로 x와 y 좌표로 받아와
수직선, 수평선, 이미지의 위치, 태그의 innerHTML을 지정해준다.
'FRONT > JAVASCRIPT' 카테고리의 다른 글
| [JS]바닐라 자바스크립트 투두리스트 (노드 추가, 삭제, 키보드 입력받기) (0) | 2021.07.24 |
|---|---|
| [JS] 클릭하면 특정 위치로 화면 스크롤 하기: scrollIntoView (0) | 2021.07.24 |
| [JS] 바닐라 자바스크립트로 미니 가계부앱 만들기 (3) | 2021.07.13 |
| [드림코딩 by 엘리] 바닐라JS로 쇼핑몰 미니게임 만들기 (0) | 2021.07.11 |
| [백준/ node.js] 배열 - 1546번 평균 (0) | 2021.07.02 |