모바일에서 커스텀 커서가 고정되는 문제: pointer 미디어 쿼리와 Pointer 이벤트
·
개발
커서 위치를 따라 움직이는 커스텀 커서 UI를 구현하던 중, 모바일 환경에서 예상치 못한 문제가 발생했다.터치가 발생한 이후, 커서가 특정 위치에 그대로 남아 움직이지 않는 현상이었다.문제 상황초기 구현은 단순히 mousemove 이벤트를 사용해 커서의 위치를 업데이트했다.document.addEventListener("mousemove", (e) => { // 커서 위치 계산}); 당연히 마우스를 움직이는 상황에서만 커서의 위치가 반영되겠지라고 생각했지만, 모바일 환경에서 테스트해보니 터치 시에도 mousemove 이벤트 핸들러가 실행되는 것을 알 수 있었다. 왜 터치 환경에서 mouse 이벤트가 발생할까?과거 컴퓨팅 환경은 데스크톱 중심이었고, 입력 장치는 마우스 뿐이었다. 그러다 터치 입력 방식이..