jQuery preventDefault()

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

하지만 이런 이벤트를 발생시키지 않아야 할 때도 있습니다.
예를들어 앵커태그를 클릭하여 데이터가 나오는 형식으로 마크업 할때 입니다.(아래 코드 참조)
# 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의 이벤트는 실행된다는 이야기입니다.