title: Double click is binding to parent or sibling element when I double click the particular element which will be hiding on single click
body: <p>I have declared two div one after other in layer format, which means "DIV2 (#myDiv2) will be placed over the DIV1 (#myDiv1). For single click on DIV2, it has to be hide. It works fine. But when I double click the DIV2, DIV2 gets hide by the first click of that double click event and then double click event also binding to the DIV1. I don't know how it happens. 
  My requirement is when I double click the DIV2, DIV2 has to hide and then single click event only needs to bind for the DIV1.</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>$("#myDiv2").click(function(e) {
    $(this).css("display", "none");
  });
  $("#myDiv1").dblclick(function(e) {
    alert("DIV 1 double clicked");
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="myDiv1" style="height:100px;width:100px;background-color:red;"&gt;&lt;/div&gt;
  &lt;br/&gt;
  &lt;div id="myDiv2" style="background-color:green; width:100px;margin-top:-80px;height:40px"&gt;I am Div 2&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>