You can do this with jQuery easily:
When you click the div, the class is added. When you click the document, the class is removed. The key is: evt.stopPropagation();
The event model in browsers lets an event pass up the chain of ancestors, so a click on the <div> will also be responded to by any click events attached to the document. In other words clicking the div will add the class, but then the document's click handler will remove it. jQuery's stopPropagation() method stops the event from passing up the chain to the document.