How to trigger click event only for the clicked-on layer and not its parent too
<p><a href="http://jsfiddle.net/5xvkM/5/" rel="nofollow">Fiddle</a></p>

<p>I can of course take the <code>.inner</code> layer out of <code>.main</code> layer
and then use absolute position against another wrapper i.e <code>.outer</code> layer
to place it in the same position and this will stop it from triggering <code>.main</code> click event. 
but I was wondering if there's an easier way to avoid having both click events fire if both child
element and parent trigger a click event.</p>
