[JS] javascript:void(0) 과 #

 

javascript:void(0)

---

' javascript: '을 사용할 경우 해당 구문이 스크립트로 평가되어 실행되어 도큐먼트의 내용으로 표시됩니다.

' javascript:void(0) '을 사용할 경우에는 스크립트의 평가 결과로 'undefined'가 반환되어 무시되므로 현재 페이지가 유지됩니다.

주의할 점은 CSP(Content Security Policy)의 설정에 따라서는 Inline Event Handler가 블럭될 수 있습니다.

(물론 void이므로 블럭된다해서 문제될 것은 없을 수 있지만 보안툴 등에 의해 경고가 출력될 수 있습니다.

 

 

 

 

#(hash)

---

' #(hash) '는 보통 페이지 내부링크를 목적으로 사용되는데 id를 지정하지 않은 경우에는 해당 페이지의 최상단으로 스크롤됩니다.

기본동작을 방지하기 위해서는 클릭 이벤트 핸들러에서 ' false '를 반환하거나  ' 이벤트의 preventDefault '를 호출해 주어야 합니다.

<script>
	function clickFunction(){
    	return false;
    }
</script>
<a href="#" onclick="clickFunction()">클릭</a>

주의할 점은 onclick속성을 이용해서 인라인 이벤트 핸들러를 사용하는 것은 마찬가지로 CSP(Content Security Policy)를 위반하는 문제가있으므로 가급적 지양하는 것이 바람직할 듯합니다.