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

Question

Hi All,

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

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

Answer 1

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

Answer 2

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