Document Click Not In Elements Jquery

Using jQuery how does one detect clicks not on specific elements, and perform an action consequently? I have the following JavaScript $('#master').click(function() { $('#slave'

Solution 1:

Since you're binding to the click event on the document, you can use event.target to get the element that initiated the event:

$(document).click(function(event) {
    if (!$(event.target).is("#master, #slave")) {
        $("#slave").hide();
    }
});

EDIT: As Mattias rightfully points out in his comment, the code above will fail to identify click events coming from descendants of #master and #slave (if there are any). In this situation, you can use closest() to check the event's target:

$(document).click(function(event) {
    if (!$(event.target).closest("#master, #slave").length) {
        $("#slave").hide();
    }
});

Solution 2:

Does this code do what you want? (not entirely sure if I understood correctly)

$('body').on('click', '*:not( #master, #slave )', function() {
    $('#slave').hide();
});

http://jsfiddle.net/gZ4Hz/8/

Solution 3:

Event delegation has long been supported natively by jQuery. The difficulty lies in creating the appropriate selector. Originally, delegate was used, but more recently the delegate form of on should be used.

The purpose of event delegation is to listen to events on child elements and invoke the bound event handlers on those elements as though they had been bound to the child element, instead of the parent. This means that instead of binding handlers to every element in the DOM, you're binding a handler to every element in the initial selection (document is a single element). This also makes for a simple way to use a single selector to bind to an ever changing set of elements, as new elements will propagate their events to document whether or not they existed when the initial event handler was bound:

$(document).on('click', '*:not(#master, #master *, #slave, #slave *)', function (e) {
    //this will reference the clicked element
});

Additionally, note that I not only said the elements must not be #master or #slave, they must not be children of #master or #slave either.

Solution 4:

Another thought, it may not be working because your browser may not be rendering body at 100% height; Try adjusting your base css to fix height of body and then a couple other thoughts.

e.stopPropagation(): Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

So if you change the first click code to the following:

$('#master').click(function(e) {
    e.stopPropagation();
    $('#slave').toggle();
});

Then you could change the call sign of the second too:

$("body, body *").not('#master, #slave').click(function(e) {
    $('#slave').hide();
});

And that should cover it. Give it a try! or see this jsFiddle

Solution 5:

Fredrik's answers works for elements already present in the document, but it didn't work for elements fetched by ajax calls. I tried the following and it works for me. Sharing the code for future ajax coders.

    $(document).on('click',function(event) {
        if (!$(event.target).closest("#selector").length) {
            if ($('#selector').is(":visible"))
                $('#selector').slideUp();
        }
    });

Would have posted it as a comment but I don't have enough reputation for that.