Stop propagation not working, avoid children click trigger other function

Question

I write simple overlay for my page, kind of lightbox, but is going to do other stuff, anyway, My bigger problem in this tests... is I want when you click the overlay mask, the overlay close... But if you click in the children div, like the content div inside the overlay the overlay must remain open.. (which is not, that's the problem)

http://jsfiddle.net/7Cr2V/

How can I say in Javascript, if I click a child div of "overlayfull" please do not close or hide the overlayfull ... here is my code.. and above is the js fiddle if you want to check it cause my English is very bad.

$('div.vidreveal a').click(
            function(event) {
                event.stopPropagation();
                $('div.videoquon').fadeToggle(300);
                                $('div.overlayfull').fadeToggle(300);
            }
        );

        
$('div.my-video-close').click(
            function(event) {
                event.stopPropagation();
                $('div.videoquon').fadeToggle(300);
                                $('div.overlayfull').fadeToggle(300);
            }
        );

$('div.overlayfull').click(
            function(event) {
                event.stopPropagation();
                                $('div.videoquon').fadeToggle(300);
                                $('div.overlayfull').fadeToggle(300);
            }
        );

Answer 1

One solution is to add a click handler to the children, in which you stop propagation:

$('div.overlayfull').children().click(function(event){
  event.stopPropagation();
});