How can an html/javascript 'widget' know when the user has clicked ANYWHERE OUTSIDE the widget?

Question

Possible Duplicate:
How to detect a click outside an element?

Let's say I create an HTML/javascript widget. Let's say that when rendered, the widget sits atop, beside or near any number of other html elements.

I want to be able to make my widget to modify itself when the user clicks anywhere but inside the widget itself.

Can this be done?

What kind of widget are you talking about? – Selvakumar Arumugam Aug 28 '12 at 20:24 — Selvakumar Arumugam, Aug 28 '12 at 20:24
What do you mean by "modify itself"? – j08691 Aug 28 '12 at 20:26 — j08691, Aug 28 '12 at 20:26

score 2 · Accepted Answer · answered Aug 28 '12 at 20:27

Bind an event to the document, then test the click event for an id.

http://jsfiddle.net/AgNmt/

$(document).on('click', function (event) {
    var $element = $(event.target);

    if ($element.attr('id') === 'mywidget') {
        // do nothing
    } else {
        alert('you have clicked outside the widget!');
    }
});

How can an html/javascript 'widget' know when the user has clicked ANYWHERE OUTSIDE the widget?

1 Answers1