How do I bind an event to any clickwith jQuery

Question

When the user clicks on a .popup_link, a little popup window is displayed and any other popup windows are removed:

$("a.popup_link").click(function(){
    hide_all_popups()
    make_popup($(this).id)  
});

But I want it to also hide_all_popups() when the user clicks anywhere else on the page thats not the popup. I need something like this:

$("[ANY]:not(a.popup_link)").click(function(){
    hide_all_popups()
});

How do I do this?

Answer 1

Bind your 'hide' handler to a document and don't allow event to bubble in your 'show' handler'.

Answer 2

$(document).click(hide_all_popups);

$("a.popup_link").click(function(){
    hide_all_popups()
    make_popup($(this).id);
    return false; // this line is very important it tells the event (click) to not go further (to not go to hide_all_popus)...
});

Answer 3

There's a really good tutorial here by Ben Nadel which addresses the issue you have. The idea to bind the mousedown event to the document element rather than using the onclick. I'll let you read the tutorial as it was very helpful for me when I had the same issue.

$(document).bind('mousedown', function() {
            //hide all popups
        });

http://www.bennadel.com/blog/1754-Track-Document-Level-Clicks-With-jQuery-MouseDown-Events.htm