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();
});    

Answer 2

stop propagation only works for parent elements it doesnt not stop the active element itself. you can encompass the text with a class and return false if clicked on that

<div id='my-video'></div>
    <div class="message">CLIC HERE MUST NOT CLOSE THE OVERLAY</div>
</div>

if (event.target.className === 'message')
                    return false;

http://jsfiddle.net/59trN/

Answer 3

I think this is the simplest way to do it if I understand the question correctly. I just check within your handler to see if the div getting clicked on is the one you don't want to close the modal, and return from the function before the fadeout is triggered:

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

Check out the fiddle http://jsfiddle.net/aRDKS/

Answer 4

Either have an event for the divs inside overloay div and stoppropagation on that. Inorder to stop the Propagation of event occurring on the children of a parent which has that particular event's handler, either check for the target from where the event generated in the paent handler or add a handler for the children and apply event.stopPropagation() to avoid the event bubbling up to the parent.

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

or check for the target's id from which the event was generated:

function (event) {
    if (event.target.id == 'overlayfull') { // Check here if the event originated from the intended div itself
        $('div.videoquon').fadeToggle(300);
        $(this).fadeToggle(300);
    }
});

Fiddle