mouseup function when clicked outside of div

Question

I am trying to implement a mouseup function where if I click anywhere outside a container, a function occurs. See script below.

The function is working well, but it happens if I click anywhere on the page.

I am trying to create an 'if' condition that if the mouse click is inside either container involved in the function, or any of their descendants, the mouseup function won't occur.

Could anyone tell me why it is not working properly? Many thanks..

The script:

$(document).mouseup(function (e)
{
var container = $('#containerprA');
var containerSW = $('#containerSW');


if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0); // ... nor a descendant of the container

if (!containerSW.is(e.target) // if the target of the click isn't the container...
    && containerSW.has(e.target).length === 0) // ... nor a descendant of the container

{
        container.fadeOut('slow',function(){
        containerSW.fadeIn('slow');
    });
}
});

score 0 · Answer 1 · answered Aug 18 '13 at 16:14

Demo Try this

$(document).ready(function(){
$('#containerSW').hide();
$(document).on('mouseup', function(e) {
    if (!$(e.target).is('#containerprA') && !$(e.target).parents().is('#containerprA')) {

        $('#containerprA').fadeOut("slow");
        $('#containerSW').fadeIn('slow');
    }
});
});

Hope this helps, Thank you

mouseup function when clicked outside of div

1 Answers1