mousemove 이벤트 수신기 함수의 본문에서 왼쪽 위치 설정이 작동하지 않습니다.

Question

내 div의 위치 왼쪽 값 중 하나가 내 mousemove event.clientX와 같아야합니다. 내 코드의 개별 항목은 스스로 작동하지만 코드는 작동하지 않습니다. 왜 ?

var shapeCanvas = document.getElementsByClassName("shape")[0]; 
shapeCanvas.style.left = '1px'; // works 

document.getElementsByClassName("body")[0] 
.addEventListener("mousemove",function(e){ 
    shapeCanvas.style.left = e.clientX + "px"; // **doesn't work** 
    console.log(e.clientX); // works also 
},false); 

Answer 1

본문 요소를 태그 대신 본문 클래스로 식별하려고했습니다. 더 나은 결과를 얻으려면 대신 창에 eventListener를 추가해야합니다. 이것이 당신이 성취하려고 시도한 것입니까?

var shapeCanvas = document.getElementsByClassName("shape")[0]; 
 
shapeCanvas.style.left = '1px'; // works 
 

 
window.addEventListener("mousemove",function(e){ 
 
    shapeCanvas.style.left = e.clientX + "px"; // **doesn't work** 
 
    console.log(e.clientX); // works also 
 
},false);

.shape{ 
 
    width:100px; 
 
    height:100px; 
 
    position:absolute; 
 
    background:lightblue; 
 
    }

<div class="shape"> 
 

 
</div>