title: hide an element when click any other place(outside the element) on the page
body: <p>I am working on a popup menu in my web page. currently, I can successfully display the menu. What I want to do is hiding the menu when I click outside of the menu. I know one way to do this is bind the click event to the document:</p>
  
  <pre><code>$(document).on('click', function(event) {
      // here I can hide the menu
  });
  </code></pre>
  
  <p>but I don't want to do that way, because binding an click event to the document looks very ugly and make the code difficult to maintain.</p>
  
  <p>many many thanks.:)</p>