Javascript & JQuery & CSS

앵커태그를 클릭했을때 페이지가 맨위로 이동되는 현상이 있습니다.
    
대체적으로 페이지내에서 스크롤 이동할때나 "맨 위로 이동"등의 이벤트를 발생시키기 위해 자주 사용합니다.

하지만 이런 이벤트를 발생시키지 않아야 할 때도 있습니다.

예를들어 앵커태그를 클릭하여 데이터가 나오는 형식으로 마크업 할때 입니다.(아래 코드 참조)
 

	# HTML ----------------------------------
	 <a href="#" class="detail"> Click </a>

	# JavaScript ----------------------------------
	jQuery(function($){
		 $(".detail").click(function(){
			 // do nothing
	     });
	});

이럴때 사용하는 것이 jQuery에서 preventDefault() 라는 녀석입니다.
    
http://api.jquery.com/event.preventDefault/
 

	# HTML ----------------------------------
	 <a href="#" class="detail"> Click </a>

	JavaScript  ----------------------------------
	jQuery(function($){
	 $(".detail").click(function(e){
		 // do nothing
		 e.preventDefault();
	 });
	});

위 처럼 코드를 짠다면 앵커태그를 클릭했을때 스크롤 이동등의 이벤트가 발생하지 않습니다.
    
다만 주의 하실건. <a href="http://www.google.com"/> Click </a> 와 같이 코딩되어 있는 것에 preventDefault()를 쓴다면 페이지 이동이

일어나지 않습니다.

하지만 마우스 롤오버, 롤아웃등(hover)의 이벤트는 실행됩니다.

즉 HTML의 이벤트는 발생되지 않지만, CSS의 이벤트는 실행된다는 이야기입니다.