jQuery bind click *ANYTHING* but *ELEMENT*

Question

Say there are some elements floating around, and I\'m trying to do some when I click ANYTHING(divs, body, whatever...) but the one specified (e.g. div#special).

I\'m

Answer 1

I've done it like this in the past:

jQuery("body").bind("click", function(e)
{
    var obj = (e.target ? e.target : e.srcElement);
    if (obj.tagName != 'div' && obj.id != 'special')
    {
        // Perform your click action. 
        return false;
    }
});

This would only execute if you didn't click on div#special. Honestly there may be better ways to do it, but this has worked for me.

Answer 2

you need to do different binds, there is no need to process all this clicks in one function

$('body').bind('click', function(e){
  bodyClickEvent();
});
$('div.floating').bind('click',function(e){
  elementClickEvent(this);
  e.stopPropagation(); //prevents bodyClickEvent
});
  $('div#special').bind('click', function(){
  e.stopPropagation(); //prevents bodyClickEvent
});

Answer 3

To handle the "do this except when this element is clicked" situation, the general approach is to add an event handler to the document which handles the "do this" case, then add another event handler to the "except this" element, which simply prevents the click event bubbling up to the document;

$('#special').on('click', function(e) {
    e.stopPropagation();
});

$(document).on('click', function (e) {
 // Do whatever you want; the event that'd fire if the "special" element has been clicked on has been cancelled.
});

See the event.stopPropagation() documentation. For those of you using versions earlier than jQuery 1.7 (as was the case when this question was asked), you won't be able to use on(); instead simple replace the 2 uses of on() with bind(); the signature in this case is the same.

Demo here; http://jsfiddle.net/HBbVC/

Answer 4

I once solved this a little easier than the other answers, whithout taking care that click really goes down the DOM-Tree

just check if your element is hovered ;)

$(document).on('click', function (e) {

  if($('#special:hover').length > 0){
    // on our special element
  }else{
    // not on our special element
  }

});

Cheers

Answer 5

I wrote this today for an issue i was having as i don't like having click events bound to the document the whole time, so for my scenario this works, using callbacks from functions.

$('#button').click(function(){
        //when the notification icon is clicked open the menu
        $('#menu').slideToggle('slow', function(){
            //then bind the close event to html so it closes when you mouse off it.
            $('html').bind('click', function(e){
                $('#menu').slideToggle('slow', function(){
                    //once html has been clicked and the menu has closed, unbind the html click so nothing else has to lag up
                    $('html').unbind('click');
                });
            });
            $('#menu').bind('click', function(e){
                //as when we click inside the menu it bubbles up and closes the menu when it hits html we have to stop the propagation while its open
                e.stopPropagation();
                //once propagation has been successful! and not letting the menu open/close we can unbind this as we dont need it!
                $('#menu').unbind('click');
            });
        });
    });

Answer 6

You could also do

$(document).bind('click', function(e) {
  if(!$(e.target).is('#special')) {
    // do something
  }
});

or if div#special has child elements you could do

$(document).bind('click', function(e) {
  if($(e.target).closest('#special').length === 0) {
    // do something
  }
});