javascript - 当子元素上的鼠标进入时，如何不触发父级上的鼠标离开？

Question

一直没能搞定这个工作。在不了解我的确切情况以及我为什么要尝试做我正在做的事情的情况下，一个基本的摘要是：

我在 parent 中有 4 个元素子元素。我目前正在mouseenter为孩子们附加一个：

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

然后我想说

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

但是，当mouseenteron 子级向父级触发 amouseleave并产生令人讨厌的闪烁时。我已经尝试e.stopPropagation()过儿童处理程序，但没有运气。mouseleave当我进入子元素并且只有当我真正离开父元素时，有什么想法如何不触发父事件？

Answer 1

尝试将两者合二为一。

官方文档：http ://api.jquery.com/on/#on-events-selector-data

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

Answer 2

尝试：

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

    showSomething();

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

});