Hide element when clicked anywhere outside
<p>Yes this question has been asked before, but it didn't solve my problem.</p>

<p>So consider this situation, say i have a div let's call it <code>container</code>, now this div contains <strong>a lot</strong> of other various objects like <code>&lt;a&gt;, &lt;img /&gt;, &lt;div&gt;, &lt;ul&gt;</code> well you get the point...</p>

<p>Now, user can do stuff in that div, write messages etc... but when he clicks anywhere outside that <code>container</code> element it should dissapear, so that's simple right?</p>

<pre><code>$(document).on("click", document, function(event){
    if($(event.target).is(".container")) return;
    $(".container").hide();
});    
</code></pre>

<p>Well indeed this would work and at the same time not, since it would only check if the target is not <code>container</code>, if you would click say on some button it would dissapear as well, well i could just include every single element in that <code>if</code> statement, oh but in my case it would be a very very long list... so there has to be a better way</p>

<p>And yes i did try to use <code>event.stopPropagation()</code> but it didn't work, i guess it's because i'm using <code>on</code> instead of simple <code>click</code> event, please help me out with this...</p>

<p>Also I have setup this fiddle for you: <a href="http://jsfiddle.net/nVfJ5/" rel="nofollow">http://jsfiddle.net/nVfJ5/</a></p>
