jquery - a, form 태그에 클릭 이벤트 적용시 기본 이벤트 차단하기

• a요소에 click이나 dblclick을 등록하면 클릭할 때마다 a에 링크된 주소로 이동하는 문제가 발생
• form요소의 제출버튼(submit)도 action에 등록된 주소로 이동시키는 문제 발생

- 위를 해결하려면 기본 이벤트를 차단해야 함.

 

 

*기본형

// 1. return false를 이용한 차단 방식

$("a 또는 form").이벤트 메서드(function() {
	자바스크립트 코드;
    return false;
});

===========================================================

// 2. preventDeafault를 이용한 차단 방식

$("a 또는 form").이벤트 메서드(function(e) {     // 파라미터 e
	e.preventDefault();
    자바스크립트 코드;    
});

 

*예제

<p>
	<a href="http://www.naver.com" class="btn1">버튼1</a>
</p>
<p class="txt1">내용1</p>   <-------- 배경색이 빨간색으로 바뀜
------------------------------------------------------------------

$(function() {
    $(".btn1").on("click", function(e) {
        e.preventDefault();
        $(".txt1").css({"background-color":"red"});
    });
});



설명
a요소의 기능을 차단하지 않을 경우
a요소를 클릭했을때 txt1의 내용1 배경색도 바뀌고 동시에 naver로 이동되는데, 

이 이동되는 기능을 차단하기 위해 preventDefault() 사용한다.
function(e) 파라미터 e를 넣어서 e.preventDefault();를 실행해 이동기능을 차단함.

결과
클래스명 txt1을 가진 p의 내용1의 배경색이 빨간색으로만 바뀜