자바스크립트 마우스 이벤트 질문

Question

자바스크립트로 아날로그 타이머를 만들고 있었는데 이해가 잘안되는 부분이 생겼습니다. 위와 같이 코드를 작성하기 전에 let x = target_x - e.clientX;let y = target_x - e.clientY; 이렇게 했었습니다.그랬더니 e.clientX와 e.clientY가 undefined 라고 나오던데위 코드처럼 e.clientX를 먼저 다른 변수에 넣은 뒤에 연산을 하면 오류가 안 생깁니다. 이거 왜 이런건가요?

컴포지트 · Answer

target 정의가 안보입니다. e.target 인가요?

777888ㅁㅁㅁ · Answer

문제의 코드에서 e.clientX와 e.clientY를 직접 사용하면서 발생한 오류는 아마도 스타일 변환 (transform)에 관련된 부분에서 발생한 것으로 보입니다. e.clientX와 e.clientY는 이벤트 객체(e)의 속성으로, 현재 마우스 포인터의 X 및 Y 좌표를 나타냅니다. 그런데 여기서 스타일 변환 문자열을 올바르게 작성하는 방법에 문제가 있습니다.다음은 올바른 스타일 변환 문자열을 생성하기 위한 수정된 코드입니다:```javascriptfunction rotate(e) { let target_x = target.getBoundingClientRect().left + (target.clientWidth / 2); let target_y = target.getBoundingClientRect().bottom; let a = e.clientX; let b = e.clientY; let x = target_x - a; let y = target_y - b; let degree = Math.atan2(y, x) * 180 / Math.PI; // 분침의 회전각 target.style.transform = rotate(${degree}deg); // 올바른 스타일 변환 문자열 사용}```여기서 변경된 부분은 target.style.transform의 값입니다. 문자열 템플릿 리터럴을 사용하여 변수 degree를 포함한 스타일 변환 문자열을 생성합니다. ${degree}deg는 degree 변수의 값을 사용하여 rotate(deg) 문자열을 생성합니다.또한, 코드에서 사용되는 target 변수가 정의되어 있다고 가정하고 있습니다. 만약 target이 정의되지 않았다면, 해당 변수를 올바르게 설정해야 합니다.따라서 e.clientX와 e.clientY를 직접 사용하는 것에 문제가 있는 것은 아니며, 스타일 변환 문자열을 올바르게 작성하는 방법이 중요합니다.

자바스크립트 마우스 이벤트 질문

2개의 답변

Q&A 목록