<a> 태그로 만든 버튼 누를 때 # 표시 뜨지 않게 하기

<a> … </a> 태그로 버튼을 만들 때 다음과 같은 경우를 생각해 볼 수 있을 것입니다.

<a href="#" onClick="user_defined_function();">Button</a>

이와 같이 링크는 #으로 처리하고 클릭하면 미리 정의된 자바스크립트 함수를 실행하게 하는 방식이 있습니다.

이 방식의 경우 문제점이 하나 있는데, 버튼을 누르고 나면 위의 주소 표시줄 끝에 # 표시가 생길 수 있다는 점입니다. 이 상태가 되면 순간적으로 페이지가 맨 위로 올라가 버리고 뒤로 가기 버튼을 한 번 더 눌러야 뒤로 갈 수 있다는 불편이 생깁니다.

하지만, 자바스크립트 함수에서 # 표시가 뜨지 않게 처리할 수 있는 방법이 있습니다.

다음 코드를 봅시다.

function user_defined_function () {
	/* Code */
	/* .... */
	return false;
}

이 코드의 4번 줄처럼 함수 끝에 return false;를 삽입하면 됩니다. <a href=”#”> 방식으로 만든 버튼을 눌렀을 때 실행할 함수를 이렇게 처리하면, 함수가 거짓값을 돌려주고 끝내면서 링크를 무효화시킵니다. 이렇게 하면 주소 표시줄에 # 표시가 뜨지 않습니다. 또한 페이지가 맨 위로 올라가지 않고 뒤로 가기 기능도 정상적으로 작동됩니다.

참고사항

• 자바스크립트 실행 버튼은 가급적이면 <button onClick=”function()”> 방식으로 쓰는 것이 좋습니다. 이 포스트는 부득이하게 <a href=”#”> 방식으로 쓸 경우 참고하기 위한 글입니다.
• <a href=”javascript:function()”> 식으로 의사프로토콜(pseudo protocol)을 사용하는 방식은 피하는 것이 좋습니다.