title: jQuery: Hide context menu on blur
body: <p>I don't use any context menu library because I don't want to so I created my own context menu. The problem is that it won't close or hide if I click somewhere else. I want it to close or hide whenever I click somewhere else or just outside the context menu.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#tbl td').on('contextmenu mousedown', function(e) {
    var content = $(this).text();
    if (e.which === 3) {
      var x = e.pageX;
      var y = e.pageY;
      $('#test').show(10, function() {
        $('#menu').menu();
        $(this).css({
          'left': x,
          'top': y
        });
      });
    }
    $('#test').blur(function() {
      $(this).hide();
    });
    return false;
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#test {
    position: absolute;
    background-color: #000;
    color: #fff;
    display: none;
    padding: 5px;
  }
  table td {
    padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;table id="tbl" border="1"&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;sample1&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;sample2&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div id="test"&gt;
    &lt;ul id="menu"&gt;
      &lt;li&gt;Item 1&lt;/li&gt;
      &lt;li&gt;Item 2&lt;/li&gt;
      &lt;li&gt;Item 3&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>