[etc] HTML - 요소 클릭 안되는 경우 (= a태그 클릭 불가능 에러 원인/이유 = 클릭 실패/에러/장애 케이스 = 링크 클릭 먹통 유형)

요소 클릭 안 되는 경우 (7가지)

1. ★

z-index 높은 다른 안 보이는 요소가 가리고 있는 경우. (가장 흔한 경우)

https://homzzang.com/b/css-113

해결책 : 다른 요소보다 z-index 값을 높게 설정.

 

---

2. 

preventDefault() 메서드에 의해 요소 기본 동작 차단된 경우.

https://homzzang.com/b/js-1445

https://homzzang.com/b/jquery-120

해결책 : 선택자를 변경하거나, preventDefault() 메서드 해제.

 

---

3. 

해당 선택자와 동일 선택자가 다른 곳에서 사용되어 클릭이벤트로 다른 동작 정의된 경우.

(예) 리모콘 .top 클래스 안 링크 클릭 시, 최상단 영역 .top 클래스 안 링크들이 작동 X

$(" .top").on("click", function(e) {

    $("html, body").animate({scrollTop:0}, '500');

    return false;

});

해결책 : 고유한 선택자명으로 재조정. (예) $("#remocon .top")

 

---

4.

JS 동작 마무리를 return false; 안 해준 경우, 최초 동작 때만 잘 되고 이 후엔 클릭해도 작동 안 됨.

(예) 

<a href="<?php echo $c_reply_href; ?>" onclick="comment_box('<?php echo $comment_id ?>', 'c'); return false;">답변</a>

 

---

5. ★

<ul> 이나 <div> 태그 너비 미설정으로 인해 가끔 안 되는 경우 발생.

해결책: <ul>, <div> 요소 너비 설정.

 

---

6. 

<div><a></a></div> 태그 구조로 잘못 코딩해서, 링크 클릭 영역을 제대로 설정 안 한 경우 (관련글 보기)

(예)

<--Bad-->

<div style="width:54px; height:56px; margin:0; padding:0; background:url('https://i.imgur.com/PQNhCln.gif'); border:1px solid red;"><a href="https://homzzang.com" style="display:block;margin:0"> </a></div>

<br><br>

<--Good-->

<a href="https://homzzang.com" style="display:block; width:56px; border:1px solid red;"><img src="https://i.imgur.com/PQNhCln.gif"></a>

 

결과보기

---

7.

브라우저에 설치한 확장프로그앰이나 악성코드 영향.

해결책:

• 확장프로그램 사용 중지
• 백신으로 악성코드 치료 

 

PS1. 그 외 여러 경우 있겠지만, 대부분 위 경우들 체크하시면 해결 됨.

PS2. 스타일은 인라인스타일 대신 (내부스타일/외부스타일) 사용 권장.