title: Not able to manipulate jQuery on particular situation in onclick event
body: <p>I have a situation where when I click on milestones link it unhide a dropdown div with milestones as a heading. </p>
  
  <p>My requirement is when I click inside that div anywhere it should not get hide. it should get hide when I click outside that div only.
  Current problem is when I click inside that div it get hide.
  Here is the link to the image just for reference.
  <a href="https://drive.google.com/file/d/0B0zHBJb86qsIUFpWMm1ra3dfc1k/view" rel="nofollow noreferrer">https://drive.google.com/file/d/0B0zHBJb86qsIUFpWMm1ra3dfc1k/view</a></p>
  
  <pre class="lang-js prettyprint-override"><code>$("#headermile").on({//task list in header
    focus:function(){
        $('#mileheader').attr("class", "");
    }, 
    blur:function(){    
  
      $('#mileheader').click(function (e) {
        if (e.target.id == 'mileheader') {
          $("#mileheader").attr("class","");
        } else {
          $("#mileheader").attr("class","hide");
        }
  
    });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;li class="has-dropdown"&gt;
    &lt;a id="headermile" href="#"&gt;Milestones &lt;/a&gt;
    &lt;div id="mileheader" class="hide"&gt;
      &lt;ul class="dropdown settings"&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>