title: disable double click on parent element when double click on children element using css or jquery
body: <p><a href="https://jsfiddle.net/hieuhv1990/2pnL03u8/" rel="nofollow">I created project demo from here</a></p>
  
  <p>When I double click on element of children, so element of parent will be trigger on the same time. I don't want double click event on element of parent trigger, so everbody can help me? Thanks</p>
  
  <pre><code>    &lt;style&gt;
      #parent {
          width: 200px;
          height: 200px;
          position: relative;
          border: 1px solid black;
      }
  
          #parent:hover {
              cursor: pointer;
              background: green;
          }
  
      #children {
          width: 100px;
          height: 100px;
          position: absolute;
          top: 10px;
          left: 10px;
          border: 1px solid black;
      }
  
          #children:hover {
              cursor: pointer;
              background: blue;
          }
  &lt;/style&gt;
  &lt;div id="parent"&gt;
      &lt;div id="children"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      $('#children').dblclick(function () {
          alert('children');
      });
      $('#parent').dblclick(function () {
          alert('parent');
      });
  &lt;/script&gt;
  </code></pre>