prevent events firing for overlapping HTML elements

Question

So, I've got two elements, one nested within the other

<div id="outer">
    <div id="inner">
         <p>Lorem Ipsum</p>
    </div>
</div>

The outer container is larger than the inner, effecting a modal overlay layout. I want to register a click event on the exposed surface of the outer that will cause both to be dismissed, but I do not want this to occur if you click on the inner div.

I'm using jQuery delegate/stopPropagation, and trying to interrogate the element to ensure it's the outer div, but to no avail - it still recieves the outer event. I'm considering hand cranking in a hit area outside the inner div, but I want to know if there's a more elegant alternative.

EDIT:

several good solutions posted here - many thanks for feedback!

Answer 1

$("#inner").click(function(event){
  event.stopPropagation();
  // do something
});  

here's a fiddle: http://jsfiddle.net/sajjansarkar/fA2sd/1/

Answer 2

$('#outer').on('click', function (e) {
    if ( e.target != this) return;
    // run your code here...
});

Here's the fiddle: http://jsfiddle.net/9sLCx/