如何在子元素触发mouseenter事件时避免父元素触发mouseleave事件？

Question

我一直没有能够让这个工作起来。不谈我的具体情况和为什么要做这件事，简单概括一下：

我有一个父元素里面有4个子元素。目前我正在给子元素绑定mouseenter事件，所以：

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

那么我想说的是

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

然而当子元素上的mouseenter事件触发时，会导致父元素上的mouseleave事件发生，并产生不好的闪烁效果。我尝试在子元素处理程序中使用e.stopPropagation()，但没有成功。有什么办法可以只在真正离开父元素时才触发父元素mouseleave事件，而不是在进入子元素时触发它吗？

- Matt

Answer 1

尝试将两者结合成一个。 官方文档： http://api.jquery.com/on/#on-events-selector-data

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

- Dipesh Parmar

---

这将事件绑定到了子元素。我希望能够单独处理这些事件，而不是在鼠标进入子元素时由父元素触发任何事件，只有当我真正离开父元素时才触发。 - Matt

我认为他想表达的是：$(".parent, .child")。 - Arthur

Answer 2

尝试：

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

    showSomething();

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

});

- Taufik Nurrohman