관리 메뉴

이사작전.com IT Blog

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

Front/jQuery

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

말랑고양 플랫폼공작소 2018.12.07 14:51

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


문제

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


해결방법

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


소스코드 공개

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


html

1
2
3
<div onclick="goToDetail()">
    <div onclick="stopTest(event)"></div>
</div>
cs


jQuery

1
2
3
4
5
6
7
8
function goToDetail(){
    location.href="detail.html";
}
 
function test(event){
    event.preventDefault();
    event.stopPropagation();
}
cs


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

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

0 Comments
댓글쓰기 폼