stopPropagation()

html 코드

	Hanb Media

이벤트 걸기

a 클릭시 링크되는 기본기능을 막고, 클릭하면 background가 blue로 변하게..
!! 나는 a 만 클릭했는데 h1 도 이벤트 전달을 받아서 background 색이 변하는것을 볼수 있다. 

$(document).ready(function(){
	$('a').click(function(event) {
		$(this).css('background-color', 'Blue');
		event.preventDefault();
	});
	$('h2').click(function() {
		$(this).css('background-color','Red');
	});
});

이벤트_h2 에 이벤트전달이 되지 않도록

stopPropagation() 메서드를 이용

$(document).ready(function(){
	$('a').click(function(event) {
		$(this).css('background-color', 'Blue');
		event.stopPropagation();
		event.preventDefault();
	});
	$('h2').click(function() {
		$(this).css('background-color','Red');
	});
});

이벤트_좀더 간단하게

return false; 를 사용하면 자동으로 prevetnDefault()랑 stopPropagtion()을 동시에 사용하는것으로 인식함

$(document).ready(function(){
	$('a').click(function(event) {
		$(this).css('background-color', 'Blue');
		return false;
	});
	$('h2').click(function() {
		$(this).css('background-color','Red');
	});
});

관련url : 이벤트 캡처링, 버블링
http://sexybone.tistory.com/243
http://sexybone.tistory.com/238