[jQuery] 함수 실행을 중지하는 방법, preventDefault, stopPropagation

안녕하세요. 이사작전입니다. 오늘은 event.preventDefault()와 event.stopPropagation()을 이용해서 함수 실행을 중지하는 방법을 공유하려합니다. 

문제

안쪽 div의 onclick을 눌렀는데, 바깥쪽 div의 onclick도 함께 실행된다.

해결방법

안쪽 div의 onclick함수 내에, event.preventDefault()와 event.stopPropagation()를 사용하여 return false와 같은 효과를 내본다. 그러면 바깥쪽 div의 onclick이 실행되지 않을 것 같다!

소스코드 공개

간단한 예제를 작성하였습니다.

html

<div onclick="goToDetail()">
    <div onclick="stopTest(event)"></div>
</div>

jQuery

function goToDetail(){
    location.href="detail.html";
}
 
function test(event){
    event.preventDefault();
    event.stopPropagation();
}

감사합니다. 궁금한 점이 있다면 댓글남겨주세요.

#jQuery #함수중단 #함수실행중지 #함수중지 #stopPropagation #preventDefault