let div disappear, onClick "everywhere but ..."

Question

I got a DIV positioned absolute above other elements on the page and I want it to disappear when clicked somewhere but NOT inside that absolute positioned div (or one of its child elements).

I'm using jQuery's event propagation ($(document).on(...)) for all click events on page.

I would like to have a generic solution, not white- or blacklists of tags, classes please.

I'm not looking for a 'put a transparent layer in between absolute DIV and other content' solution, that would be my last ressort workaround.

Thx

This page will probably help : http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element — Rondel, Mar 12 '12 at 14:27

score 3 · Answer 1 · edited May 23 '17 at 11:48

3

$('html').click(function() {
  //Hide whatever you want to hide
});

$('#your_div').click(function(e){
  e.stopPropagation();
});

you could also try this.

edited May 23 '17 at 11:48

Community

1
1

answered Mar 12 '12 at 14:15

Marius Ilie

3,265
2
23
27

Nicola Peluchetti · Answer 2 · 2012-03-12T14:35:11.320

1

You could use e.target to check what has been clicked

$(document).on("click", "*", function(e) {
   if(e.target.id !== 'yourdivid'){
      $('#yourdivid').hide();
   }
  //Hide whatever you want to hide
});

EDIT - if you also need to check for children elements you could do like this

$(document).on("click", "*", function(e) {
   //check if the target is your div or a child of your div
   if($(e.target).closest('div#yourdivid').length !== 1){
      $('#yourdivid').hide();
   }
  //Hide whatever you want to hide
});

edited Mar 12 '12 at 14:35

answered Mar 12 '12 at 14:17

Nicola Peluchetti

74,514
30
136
188

this doesn't work if you click on the body, you have to click on an element. http://jsfiddle.net/khKb5/1/ – Alex Mar 12 '12 at 14:31

score 0 · Answer 3 · answered Mar 12 '12 at 14:28

0

http://jsfiddle.net/khKb5/

jQuery:

$(document).on("click", function(e) {
    if($(e.target).closest('#box').length != 1){
        $('#box').hide();
    }
});

This works also if you click somewhere directly on the body.

answered Mar 12 '12 at 14:28

Alex

6,096
1
19
26

score 0 · Accepted Answer · answered Mar 12 '12 at 14:47

0

$(document).on('click', function(e) {
    if (!(e.target.id=='myID' || $(e.target).parents('#myID').length>0)) {
        //do something
    }
});

FIDDLE

answered Mar 12 '12 at 14:47

adeneo

303,455
27
380
377

winner, because of choosing parents() instead of closest(), see http://jsperf.com/jquery-parents-vs-closest/2 – ezmilhouse Mar 12 '12 at 15:13

let div disappear, onClick "everywhere but ..."

4 Answers4