Click outside menu to close is not working
<p>I have been reading <a href="http://stackoverflow.com/questions/2868582/click-outside-menu-to-close-in-jquery">some questions at stackoverflow</a>, about how to closing a menu when clicking outside by using jQuery without plugins.</p>

<p>I tried to use <code>event.stopPropagation()</code> but is not working. Could you tell me how to use it in the next code, and <strong>explain why is working</strong> in yours?</p>

<p>This is the original code in my webpage, and <strong>I want it to do the same function, plus closing it when clicking outside</strong> (<a href="https://github.com/gamersmafia/gamersmafia/blob/production/app/assets/javascripts/application.js#L84" rel="nofollow">full code here</a>):</p>

<pre><code>$('.open-popup-on-click').unbind('click').click(function() {
    $('#' + $(this).data('popup-id')).toggleClass('hidden');
    return false;
});
</code></pre>

<p>HTML code (the first div is just a link where users click, and when they do, second div is open as a popup):</p>

<pre><code>&lt;div class="topbar-block topbar-profile-options"&gt;
  &lt;a class="open-popup-on-click"
    data-popup-id="topbar-user-actions"
    href="/cuenta"&gt;&lt;%=avatar_img(@user, :very_small)%&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;div id="topbar-user-actions" class="hidden popup"&gt;
  &lt;div style="float: left"&gt;&lt;a href="/miembros/&lt;%=@user.login%&gt;"&gt;&lt;%=avatar_img(@user, :normal)%&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;ul style="display: inline-block"&gt;
    &lt;li&gt;&lt;a href="/cuenta"&gt;mi cuenta&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/cuenta/clanes"&gt;mis clanes&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/cuenta/competiciones"&gt;mis competiciones&lt;/a&gt;&lt;/li&gt;
    &lt;li style="padding-top: 20px; padding-bottom: 20px;"&gt;&lt;a href="/miembros/&lt;%=@user.login%&gt;"&gt;mi perfil público&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="confirm-click nav" href="/cuenta/logout"&gt;cerrar sesión&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p><code>open-popup-on-click</code> is a class used with all links, from where I want to open a popup. In this case, the popup is the second div, with ID <code>topbar-user-actions</code></p>

<p>If you still don't understand me, please look this image:</p>

<p><a href="http://i281.photobucket.com/albums/kk205/LEANDRO351/Gamersmafia/exampleMenu.png" rel="nofollow">http://i281.photobucket.com/albums/kk205/LEANDRO351/Gamersmafia/exampleMenu.png</a></p>

<p>Thanks in advance.</p>
