[JavaScript] javascript:void(0) 과 #

들어가며

작업을 하다보면, a태그의 디자인성은 유지하면서 링크 기능을 없애는 작업이 필요할 때가 있다.

주로 javascript:void(0) 또는 #(Hash)를 사용한다. 이들을 비교해보겠다.

 

 

javascript:void(0)

<a href="javascript:void(0);">Click</a>

javascript:void(0) 결과값

• void 연산자가 undefind 값을 반환 => a태그의 href속성값에 undefind값이 지정되어 아무런 동작을 하지 않음.
• (void(1)과 같이 숫자나 영문자 등을 사용해도 무방하나) 일반적으로 void(0)을 사용.
• CSP(Content Security Policy)의 설정에 따라, 인라인 이벤트 핸들러(Inline Event Handler)가 블럭될 수 있음. 
  (물론 void이므로 블럭된다해서 문제될 것은 없을 수 있으나, 보안툴 등에 의해 경고가 출력될 수 있음)

 

# (Hash)

• id를 지정하지 않을 경우 해당 페이지의 최상단으로 스크롤 됨.
• 기본동작을 방지하기 위해서, 클릭 이벤트 핸들러(Click Event Handler)에서 false를 반환하거나 preventDefault 호출 필요.

 

<a href="#" onclick="handlerEX()">Click</a>

 

/* script */
	function handlerEX() {
	return false;
}

 

또는

<a href="#" id="someId">Click</a>

 

/* script */
document.getElementById("someId").addEventListener("click", function (e) {
  e.preventDefault();
});

 

 

 

 

 

---

참고 사이트

javascript:void(0)과 #중에 어떤것을 사용할까