Wallel

a태그에 링크 기능을 넣지 않거나 아직 링크가 없을 경우 흔히 href값에 #을 넣는다.
근데 이 링크를 누르면 ‘#‘ 때문에 자꾸 페이지 상단으로 이동되니 여간 귀찮은게 아니다.

링크의 href값이 #일 경우 링크를 눌러도 아무런 반응이 없게 하는 방법을 기록한다.

방법1

<a href="#" class="js-action-a">자바스크립트 액션 실행할 Anchor 태그</a>

<script>
	// 방법 1 - 모든 기존 선언된 이벤트 무시하기 (자바스크립트 이벤트 포함)
	jQuery('.js-action-a').click(function (e) {
		e.preventDefault();
	});
	
	// 방법 2 - 단순히 링크가 동작하지 않게 하기 (고전적인 방법)
	jQuery('.js-action-a').click(function () {
		return false;
	});
	
	// 참고 (2) : http://stackoverflow.com/questions/4224920/alternative-to-a-href-when-the-anchor-tag-only-triggers-a-jquery-action-wi
</script>

href="#" 을 대체하기 위해 방황하는 나를 위해 회사 선배가 보내준 스크립트.
링크에 class를 붙여 스크립트를 활성화 하는 방법이다.

방법 2

// case1
$(document).on('click', 'a[href="#"]', function(e){
	e.preventDefault();
});

// case2
$('a[href="#"]').click(function(e) {
	e.preventDefault();
});

모든 <a href="#">link</a> 태그에 대한 이벤트를 끄는 방법이다.
둘 중 원하는 코드를 사용하면 된다.

사실상 방법1, 방법2 모두 같은 기능이니 원하는 것으로 사용하는걸로…

필자는 방법2의 case2를 자주 사용한다.