title: How to NOT trigger mouseleave on parent when mouseenter on child element?
body: <p>Haven't been able to get this work.  Without going to my exact situation and why I'm trying to do what I'm doing, a basic abstract is:</p>
  <p>I have 4 elements child elements inside a parent .  I currently am attaching a <code>mouseenter</code> to the children so:</p>
  <pre><code>$('.parent').on('mouseenter', '.child', function() {
      showSomething();
  });
  </code></pre>
  <p>Then I'm trying to say</p>
  <pre><code>$('.parent').on('mouseleave', function() {
      hideSameSomething();
  });
  </code></pre>
  <p>But when the <code>mouseenter</code> on the child fires a <code>mouseleave</code> on the parent and creates a nasty flicker.  I've tried <code>e.stopPropagation()</code> on the child handler but no luck.  Any ideas how to not fire the parent <code>mouseleave</code> event when I'm entering the child elements and only when I really leave the parent?</p>