jQuery stopPropagation()사용하기

 

 

---

 

 

stopPropagation 실행 전

 

 

---

 

 

stopPropagation 실행 후

 

 

 

$('button').click(function(){  --> 버튼 클릭 시 버튼의 크기 증가

  $('button').css('width', '+=10px').css('height', '+=3px').event.stopPropagation();

})

 

$('#sp2').click(function(){ --> span(id="sp2")클릭 시 span 태그의 배경색 녹색으로 변경

  $('#sp2').css('background', 'green');

  event.stopPropagation();

})

 

$('div').click(function(){ --> div 클릭 시 div 테두리 생성

    $('div').css('border', 'solid 10px lightgreen');

    event.stopPropagation();

 

})

 

 

 

 

* stopPropagation :

              자식에서 발생한 이벤트를 부모에서 실행되는 것을 막아준다.

              액션을 주면 액션을 준 곳에서만 이벤트가 발생한다.

              return false로도 비슷한 결과를 만들 수 있다.