How to select body except one element?

Question

I'm using a color-picker which should be hidden when a click is made anywhere outside it. The problem is, it disappears even when the click is made inside the picker.

$('body :not(#picker)').click(function() {
    $('#picker').fadeOut();
});

I tried this, but it would show the picker and hide it immediately. Does anybody have a suggestion?

score 22 · Accepted Answer · answered Aug 09 '11 at 08:42

22

Try using event.target to obtain the element that was clicked:

$("body").click(function(event) {
    if (event.target.id != "picker") {
        $("#picker").fadeOut();
    }
});

answered Aug 09 '11 at 08:42

Frédéric Hamidi

258,201
41
486
479

You might want to use *window* or *html* instead of *body* since the body might not cover the whole window area. – Jari Dec 12 '14 at 10:50
@Jari, I would go with `document`, then. I went with `body` in my answer because that's the element used by the questioner. – Frédéric Hamidi Dec 12 '14 at 11:00
You just save my day! +1 – Gabriel Rodrigues Oct 30 '15 at 18:39

score 3 · Answer 2 · answered Aug 09 '11 at 08:46

3

$("body").click(function(e) {
    if ($(e.target).attr('id') == 'picker') {
        return;
    } else {
        $('#picker').fadeOut();
    }
});

answered Aug 09 '11 at 08:46

thecodeparadox

86,271
21
138
164

How to select body except one element?

2 Answers2