Question

I have a postcard feature that basically animates an overlay div then puts a postcard in above it. The HTML is something along the lines of:

<div id="overlay">
    <div class="postcard">
        <p>This is a postcard</p>
        <a href="#">close</a>
    </div>
</div>

My jquery looks like this:

$('#overlay, .postcard a').click(function(){ doSomething() })

I want my event handlers to pickup clicks on the overlay div and the postcard anchor only.

Currently a click is identified on all elements, including the postcard div.

Any help would be very much appreciated.

Answer 1

This is due to the event propagation mechanism of Javascript, you can read more at:

http://www.quirksmode.org/js/events_order.html

Javascript: Multiple mouseout events triggered

You can avoid this by disabling the click event at the inner div, like this:

$('.postcard').click( function(evt) { evt.stopPropagation(); } );