화면에는 보이는데 클릭이 안 되는 이유
1. 보이는데 클릭이 안 되는 현상 이해
버튼이나 링크가 화면에 분명히 보이는데 클릭이 안 되면, 많은 분이 JavaScript 이벤트 문제부터 의심합니다. 물론 이벤트 바인딩 문제일 수도 있지만, 실제로는 CSS 레이어 충돌이나 disabled 상태처럼 UI 구조 문제인 경우가 매우 흔합니다. 즉 "보인다"와 "클릭 가능하다"는 완전히 다른 조건입니다.
클릭 가능하려면 요소 위를 다른 레이어가 막고 있지 않아야 하고, 포인터 이벤트가 허용되어야 하며, 요소가 비활성 상태가 아니어야 합니다. 그래서 이 문제는 레이아웃, 속성 상태, 이벤트 연결을 동시에 확인해야 빠르게 해결됩니다.
2. 가장 흔한 원인 체크리스트
아래 다섯 가지는 "보이는데 클릭 안 됨" 이슈에서 거의 항상 등장하는 원인입니다.
| 원인 | 대표 증상 | 즉시 확인 방법 |
|---|---|---|
| 겹침 레이어 | 클릭이 주변으로 새거나 아무 반응 없음 | Elements에서 상단 요소와 z-index 확인 |
| pointer-events 설정 | 마우스 커서 변화 없음 | 클릭 대상/부모에 pointer-events: none 여부 점검 |
| disabled 속성 | 버튼이 눌리지 않고 스타일만 보임 | disabled, aria-disabled 상태 확인 |
| 이벤트 미바인딩 | 콘솔 로그조차 안 찍힘 | addEventListener 실행 여부와 선택자 점검 |
| 동적 렌더 후 핸들러 유실 | 처음엔 되다가 갱신 후 안 됨 | 재렌더 후 이벤트 위임 패턴 적용 |
3. 빠르게 해결하는 점검 순서
1) 클릭 이벤트 로그부터 찍기
가장 먼저 핸들러 첫 줄에 console.log('clicked')를 넣어 이벤트 진입 여부를 확인하세요. 로그가 찍히면 이벤트는 정상이고, 이후 로직 문제입니다. 로그가 안 찍히면 선택자, 레이어, disabled 상태를 우선 점검해야 합니다.
2) 개발자도구로 실제 클릭 대상 확인
클릭하려는 요소를 선택한 뒤 박스 모델을 보면, 눈에 보이지 않는 오버레이가 위를 덮고 있는지 확인할 수 있습니다. 모달 배경, 고정 헤더, 투명 div가 흔한 원인입니다. 이런 경우 z-index를 조정하거나 덮는 요소의 pointer-events를 조정하면 해결됩니다.
3) CSS 속성 상태 점검
버튼 자체에 pointer-events: none이 들어가 있거나 부모 요소가 클릭을 막는 경우도 있습니다. 또한 opacity가 낮아 보여도 클릭 가능할 수 있지만, visibility: hidden 또는 display: none이면 애초에 상호작용이 불가능합니다. 상태 관련 속성을 함께 확인해야 정확합니다.
4) 동적 UI에서는 이벤트 위임 사용
innerHTML로 목록을 다시 그리면 기존 이벤트가 사라져 클릭이 먹통처럼 보일 수 있습니다. 이럴 때는 부모 컨테이너에 한 번만 이벤트를 걸고, 이벤트 대상(target)을 식별하는 이벤트 위임 패턴이 더 안정적입니다. 동적 렌더가 많은 화면에서는 사실상 필수 패턴입니다.
4. 클릭 이슈 재발 방지 팁
첫째, UI 컴포넌트 작업 후 핵심 버튼을 직접 클릭 테스트하는 루틴을 만드세요. 둘째, 레이어를 많이 쓰는 화면은 z-index 체계를 문서화해 충돌을 줄이세요. 셋째, 동적 리스트는 처음부터 이벤트 위임 기반으로 설계하면 재렌더링 이슈를 크게 줄일 수 있습니다.
AI에게 디버깅 요청 시에는 문제 요소 HTML, 관련 CSS(z-index/pointer-events), 이벤트 바인딩 코드를 함께 전달하세요. 정보가 충분할수록 해결이 빨라집니다. 결국 핵심은 누가 클릭을 받는지 확인하고, 막는 요소를 제거하며, 이벤트 연결을 안정화하는 것입니다.
5. 자주 묻는 질문
Q1. hover는 되는데 click만 안 됩니다.
A. 이벤트 로직 문제거나 click 대상이 다른 요소로 바뀌는 상황일 수 있습니다. 콘솔 로그와 event.target을 함께 확인해 보세요.
Q2. 모바일에서만 클릭이 안 돼요.
A. 터치 영역 겹침이나 fixed 레이어 충돌 가능성이 큽니다. 모바일 뷰포트에서 요소 경계와 오버레이를 별도로 확인하세요.
Q3. disabled를 해제했는데도 안 눌립니다.
A. 속성은 해제됐지만 클래스 기반 스타일이나 상위 로직에서 다시 비활성화할 수 있습니다. 렌더링 시점마다 disabled 상태가 재설정되는지 추적하세요.