CLICK EVENT ON PARENT NOT NESTED ITEMS

by bizamajig

HTML

<div id="master-list" style="padding: 30px 30px 30px 30px; width: 100%;">
  <div id="0" style="padding: 20px 20px 20px 20px;">
    ccc
  </div>
  <a id="A" class="card" href="#" style="border: 3px solid #000; display: block; padding: 20px 20px 20px 20px;text-decoration: none;">
    <div id="1" class="event-no-bubble-no-follow" style="padding: 20px 20px 20px 20px;">
      ccc
    </div>
    <div id="DIV1" style="padding: 20px 20px 20px 20px;">Click me</div>
    <div class="event-no-bubble-no-follow" id="DIV2" style="padding: 20px 20px 20px 20px;">Click me, not</div>
    <input class="event-no-bubble-no-follow" type="text" id="input-1" name="input-1" />
    <div id="DIV3">Click me</div>
    <div id="DIV4">Click me</div>
  </a>
</div>

JavaScript

$( document ).on( 'click', function ( e ) { // MVC EXAMPLE

//	e && e.preventDefault(); // if not the first, then the second

	var $element																	= $( e.target )								|| '',
		input__id	 																= e.target.id 								|| '';

//
//	Find closest element with an ID attribute value
//
// $element = $( '#' + input__id ).closest( 'a[id]' );

//
//	If we click on the wiring, ignore
//
	if ( input__id === 'master-list' ) {
		alert( 'returning - #master-list' );
		return true; // safe return
	}
//
//	If we clicked on non-EOI, a.card
//
	if ( ! $element.closest( 'a.card' ).length > 0 ) {
		alert( 'returning - not an a, a *' );
		return true; // safe return
	}
//
//	If we clicked on non-EOI, like nested buttons that should take precedence and ignore any parent EOI events
//
	if ( $element.closest( '.event-no-bubble-no-follow' ).length > 0 ) {
		alert( 'returning - no follow/action' );
		return true; // safe return
	}

//
//	If we click on an alternative EOI nested within our card list, '#master-list > a.card', process the immediate parent a.card
//
/*
	if ( input__id === '' ) {
		$element																	= $( e.target ).parents( '.card' )			|| '';
	}
*/
//
//	If we click on an a.card in our card list, '#master-list > a.card', process the immediate parent a.card
//
/*
	if ( input__id === '' ) {
		$element																	= $( e.target ).parents( '.card' )			|| '';
	}
*/

//	if ( $( e.target ).parents( '.event-no-bubble-no-follow' ).length 			> 0 ) {


/*
	if ( $element.is( 'a' ) ) {
		alert( 'i am an a ' + e.target.id );
	}
	
	if ( $element.is( 'a *' ) ) {
		alert( 'i am INSIDE an a ' + e.target.id );
	}
*/
	
	if ( $element.closest( 'a' ).length > 0 ){
		alert('You clicked a link');
	}
	else{
		alert('You did not click a link');
	}
		
//	bizamajig__mvc__exec({
//		element:																	$element
//	});

	console.log( input__id );
});