Calling a jQuery function when clicking on "body"

Question

I have a script that slides a div out of view when the user clicks on the background (the <body>).

Here's my code:

// Slide back out of view.
$('body').click(function(){
    $('.presentationArea').animate({'height': '0px'}, 1000);
});

But, see, here's the problem; If the user clicks ANYWHERE on the page, I.E. Menu links, buttons, textfields, images, the above function gets called! I only want it to be called if the user clicks the "body", you know, that thing BEHIND everything else? :) How would one do this?

Thank you

T.J. Crowder · Accepted Answer · 2011-03-14T13:18:34.627

I only want it to be called if the user clicks the "body", you know, that thing BEHIND everything else? :)

You can check event.target and see if it's the actual document.body element. (Live example) But I suspect people are going to find it difficult to click that as opposed to (say) a p element, because the body doesn't typically fill the display area unless something is there to expand it (although you can do it with CSS).

But fundamentally, you can use event.target to see where the click was and decide at that point whether it's a click you want to handle (whether it was technically actually on body itself or something else you want to go ahead and treat the same way).

Alternately, you could hook up a handler to stop event bubbling via stopPropagation on all of the elements you don't want clicked — e.g., for a elements:

$('a').click(function(event) {
    event.stopPropagation();
});

stopPropagation just stops bubbling, not the default action (e.g., it doesn't keep people from following the link). But the side-effects of that might be a pain (I haven't done it globally like that, only targeted).

score 1 · Answer 2 · answered Mar 14 '11 at 13:06

1

You should check whether e.target is the <body> element.

answered Mar 14 '11 at 13:06

SLaks

868,454
176
1,908
1,964

score 0 · Answer 3 · edited May 23 '17 at 10:24

0

You are experiencing "bubbling" your click will bubble from the child element all the way up to the parent and trigger the function.

See the answer on this thread for more details:

How to stop event bubbling with jquery live?

Basically, you'll have to add a new function that on click has return false to stop the bubbling.

$('#wrapper').bind(void(0), false)

Should work assuming you have a wrapper div, as the second parameter "false" prevents bubbling.

edited May 23 '17 at 10:24

Community

1
1

answered Mar 14 '11 at 13:07

Chris Sobolewski

12,819
12
63
96

Thanks! I've not heard of event bubbling before. – Mar 14 '11 at 13:19

scheffield · Answer 4 · 2011-03-14T14:52:25.293

0

use something like this:

// Slide back out of view.
$('body').click(function(event){
    if (event.target === this) {
        $('.presentationArea').animate({'height': '0px'}, 1000);
    }
});

edited Mar 14 '11 at 14:52

answered Mar 14 '11 at 13:09

scheffield

6,618
2
30
31

score 0 · Answer 5 · answered Mar 14 '11 at 13:17

0

Okay, I've got it:

  $("body").click(function(event) {  
    if(event.target.nodeName == "body" || event.target.nodeName == "BODY")
    {
      $('.presentationArea').animate({'height': '50px'}, 1000);
    }
  });

answered Mar 14 '11 at 13:17

1

`if (event.target === document.body)` – SLaks Mar 14 '11 at 13:21
Ah! Thanks @SLaks! That's much cleaner/betterer! – Mar 14 '11 at 13:21

Calling a jQuery function when clicking on "body"

5 Answers5