Disabled Input에서도 클릭 이벤트 처리하기: onPointerDown 활용하기

수지·2025년 2월 20일

TIL

목록 보기
1/4
post-thumbnail

📍 요구 사항


  1. 비회원에 대해 input 을 비활성화
  2. 클릭했을 때는 로그인 페이지로 유도

🚨 문제


input 태그를 disabled할 경우, 대부분의 이벤트를 받지 않음

HTML disabled 속성
disabled 속성이 폼 컨트롤 요소에 지정되면 해당 요소와 하위 폼 컨트롤 요소들은 제약 조건 검증에 참여하지 않습니다. 브라우저는 종종 해당 컨트롤들을 회색으로 나타내고 마우스 클릭이나 포커스와 관련된 브라우징 이벤트를 수신하지 않습니다.


✅ 해결 방법


onPointerDown 활용하기!

onPointerDown은 input 태그가 아닌 브라우저가 포인터 이벤트를 감지하기 때문에, input 태그가 비활성화된 상태에서도 클릭 이벤트를 설정할 수 있다.

profile
낮에는 코드 치고 밤에는 글 씁니다.

0개의 댓글