Jquery Propagation

Example for the stopPropagation & stopImmediatePropagation

by Sahil kashetwar

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/ui-lightness/jquery-ui.css">
<div class = "test">
Parent Div 1
  <p href="#">stopPropagation Test</p>  
</div>

<hr>

<div class = "test1">
Parent Div 1
  <span class="immediate" href="#">stopImmediatePropagation Test</span>  
</div>

CSS

span {
  display: block;
}

JavaScript

$(".test").click(function(event){
  //Attaching the event to the parent or outer element
	$(this).css("background-color", "cyan");

});

$("p").click(function(event){
//This function only remove the handler of the parent element not current or itself
   event.stopPropagation();
   $(this).css("text-decoration", "underline");
});

$("p").click(function(event){
  $(this).css("background-color", "red");
});  

$("p").click(function(event){
  $(this).css("font-size", "50px");
});  

//Here Example for the       event.stopImmediatePropagation();

$(".test1").click(function(event){
  //Attaching the event to the parent or outer element
	$(this).css("background-color", "bisque");

});

$(".immediate").click(function(event){
//This function removes all the handler of the parent element or the current element as well itself
      event.stopImmediatePropagation();
		$(this).css("text-decoration", "underline");

});

$(".immediate").click(function(event){
  $(this).css("background-color", "red");
});  

$(".immediate").click(function(event){
  $(this).css("font-size", "50px");
});