How to NOT trigger mouseleave on parent when mouseenter on child element?

Question

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:

I have 4 elements child elements inside a parent . I currently am attaching a mouseenter to the children so:

$('.parent').on('mouseenter', '.child', function() {
    showSomething();
});

Then I'm trying to say

$('.parent').on('mouseleave', function() {
    hideSameSomething();
});

But when the mouseenter on the child fires a mouseleave on the parent and creates a nasty flicker. I've tried e.stopPropagation() on the child handler but no luck. Any ideas how to not fire the parent mouseleave event when I'm entering the child elements and only when I really leave the parent?

Answer 1

Try combining both into one.

Official Document : http://api.jquery.com/on/#on-events-selector-data

$(".parent, .child").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    }
});

Answer 2

Try:

$('.parent .child').on("mouseenter", function() {

    showSomething();

    $(this).closest('.parent').on("mouseleave", function() {
        hideSameSomething();
    });

});