Question

Given the html / css / javascript/jquery as follows, the event still fires when I click on ‘#bbb’.

Is there anyway to avoid this from happening?

<div id="aaa" style="position:absolute; width:100%; height:100%; background-color:#f00;">
   <div id="bbb" style="height:25%; width:25%; background-color:#0f0; margin:0 auto;">
   </div>
</div>

<script type="text/javascript">
   $('#aaa').click(function(){alert('aaa clicked');});
</script>

Answer 1

Here you go:

$( '#aaa' ).click(function (e) { 
    if ( e.target !== this ) { return; }
    alert( 'aaa clicked' );
});

e.target points to the DOM element at which the click event was fired. this points to the #aaa element (because it’s his click handler). Therefore, this line

if ( e.target !== this ) { return; }

will terminate the click handler early if the #aaa element wasn’t clicked directly.

Live demo: http://jsfiddle.net/qbDZy/