-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
강사님 도와주세요!
21.10.12 14:05 작성 조회수 110
0
제가 하려고 해도 어떤 부분이 왜 안되는지 전혀 모르겠습니다. ㅠㅠ
Console에 문제가 생겼다고 하지도 않은데 왜 안되는지 모르겠습니다. ㅠㅠ
빨간 박스가 전혀 움직이지 않고
undefined만 뜹니다.ㅠㅠ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse의 움직임</title>
<style>
body{
background-color: rgb(255, 182, 93);
position: relative;
}
h1{
color: #000;
}
.cursor_item {
position: absolute;
width : 100px;
height : 100px;
background-color: red;
top: 0;
left: 0;
}
</style>
<script>
window.onload = function(){
let h1 = document.getElementsByTagName("h1")[0]; //Tag이름으로 선택
let cursor_item = document.getElementsByClassName("cursor_item")[0];//클래스 이름으로 선택
window.addEventListener("mousemove", mouseFunc,false);
function mouseFunc(e){
h1.innerHTML = "x: " + e.clinetX + "y: " + e.clinetY;
//console.log(e.clinetX, e.clinetY);
cursor_item.style.transform = "translate(" +e.clinetX + "px," + e.clinetY + "px)";
}
}
</script>
</head>
<body>
<h1>test</h1>
<div class="cursor_item"></div>
</body>
</html>
답변을 작성해보세요.
1
코딩일레븐
지식공유자2021.10.12
안녕하세요 답변이 늦었습니다.
확인해보니 오타가 있으셨네요.
아래처럼 수정해서 해보시면 될 겁니다.
열공하세요~!
console.log(e.clientX, e.clientY);
코딩일레븐
지식공유자2021.10.22
위의 이벤트는 마우스 무브 이벤트라 안 되고요.
마우스 클릭이벤트로 좌표 찍히나 테스트 한 번 해보세요.
그리고 '터치이벤트'를 검색해보세요. 원리는 같습니다. Touchmove
잘 안되시면 다시 질문 남겨주세요
답변 1