OUTER PARENT INNER CHILD CLICK EVENT

by bizamajig

HTML

<div id = "parent">
  <a class="event-no-follow-no-bubble">Parent</a>
 	<div id = "child">
      <a>Child</a>
    </div>
</div>

CSS

#parent{padding: 20px;background-color:#A5AEC4;}
#child{
  background-color:#b2d3f5;
  height:100%;
  width:110px;
  position:relative;
}

JavaScript

$(document).ready(function() {

  $('#parent').click(function(e){

		if ( ( e.target !== this) && ( $( e.target ).hasClass( 'event-no-follow-no-bubble' ) ) ) {
      console.log("Parent Click - NOT EQUAL", e.target );
    	return false;
    }

    if( e.target === this) console.log("Parent Click - EQUAL");
    if( e.target !== this) console.log("Parent Click - NOT EQUAL", e.target );
  });

  $("#child").click(function(e) {
    if( e.target === this) console.log("Child Click - EQUAL");
    if( e.target !== this) console.log("Child Click - NOT EQUAL", e.target );

		return true; // Non-bubble-cancelling return
//	OR
		return false;
//	OR
    e.stopImmediatePropagation();  
//	OR
    e.stopPropagation();  
  });
});