How do I write 'if not clicked' or 'if clicked outside element', using Jquery?

I'm kind of stuck on a problem of how to stop my menu from executing the fadeOut() function. When I click the main links on my menu to open the submenu it just fades out. Here is how the code looks at the moment:

    $('a.main-menu-item').click(function(){

    if($('.rtmenu:visible')){

        $('.rtmenu').click(function(e) { e.stopPropa开发者_如何学JAVAgation(); });

        $(document).click(function() {
            $('.rtmenu').fadeOut(200);
        });
    }
})

Can anyone tell me how I can write 'if not clicked a.main-menu-item' where it says 'document'?

Much Appreciated

---

SOLUTION FOUND!

$('.rtmenu').click(function(e) { e.stopPropagation(); });
$('.rtmenu').mouseout(function(){ 
     $(document).one('click',function() { $('.rtmenu').fadeOut(200); }); 
 })

---

Have a look at Ben Alman's "outside events" plugin. It allows you to define a range of events, not just click events. With it, your code would look something like this:

$('.rtmenu').bind('clickoutside', function() {
    $(this).fadeOut(200);
});

As an aside, you shouldn't set up the bind inside the click event for the menu, this will attach another handler every time the menu option is clicked. Your code should be replace with something like:

$('a.main-menu-item').click(function(){
    // Show menu item
});
$('.rtmenu').bind('clickoutside', function() {
    $(this).fadeOut(200);
});

---

use blur event to handle losing focus. This might help also.