Pointer Lock의 mousemove 를 마우스
마우스 움직임에 따라 좌표를 출력하되, 마우스 커서는 보이도록 변경하려면, pointer lock을 사용하지 않고 mousemove 이벤트를 직접 활용하면 됩니다.
아래와 같이 코드를 수정해주세요.
pointer lock 관련 코드를 제거하고, mousemove 이벤트는 container에 추가하여
해당 영역 내에서의 마우스 좌표를 출력하도록 변경하면 됩니다.
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Move 예제</title>
</head>
<body>
<p id="output">마우스를 움직이면 이동 값이 표시됩니다.</p>
<div id="container" style="width:100px;height:100px; background:#ccc;"></div>
<script>
const output = document.getElementById("output");
const container = document.getElementById("container");
// 마우스 움직임 감지
container.addEventListener("mousemove", (event) => {
output.textContent = `X: ${event.clientX}, Y: ${event.clientY}`;
});
</script>
</body>
</html>
```
해당 코드를 통해서 마우스 커서는 보이고,
container 내에서 마우스의 X, Y 좌표를 출력할 수 있습니다.
글 목록으로 돌아가기