[jQuery] 제이쿼리(jquery)의 이벤트 취소함수 - stopPropagation()

 

stopPropagation() 함수는 제이쿼리(jquery)에서 preventDefault() 함수와는 다르게 이벤트 취소를 하는 함수로써 현재 이벤트 이후의 전파를 모두 취소하는 함수입니다.

쉽게 말하자면 부모 태그로의 이벤트 전파를 모두 취소하는 함수입니다.

 

//stopPropagation() 함수 사용법

event.stopPropagation()

 

제이쿼리(jQuery)의 preventDefault() 함수

제이쿼리(jQuery)의 stopPropagation() 함수는 클릭 이벤트 외에 별도의 브라우저 행동을 제지하기 위하여 사용되는 함수입니다.

<div id="first-test">
  <ul id="second-test">
    <li id="third-test">
      <div id="Test">TEST</div>
    </li>
  </ul>
</div>

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

//이벤트 전달을 중단하는 stopPropagation() 함수
$("#Test").click(function(event){
	event.stopPropagation();
	alert("Test");
});
$("#third-test").click(function(){
	alert("third-test");
});
$("#second-test").click(function(){
	alert("second-test");
});
$("#first-test").click(function(){
	alert("first-test");
});

 

위에 예시와 같이 id 값 Test 클릭만 했을 때 발생하는 이벤트를 stopPropagation() 함수를 사용하여 상위 element에 전달되지 않도록 취소하는 함수입니다. event.preventDefault() 함수와 차이점을 꼭 확인해야 할 필요성이 있습니다.