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 좌표를 출력할 수 있습니다.