忽略JS中相同元素的子节点上的mouseenter / mouseout事件

Question

我在我的网站上使用此菜单（http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/），我稍微修改了一下。我不想使用按钮来显示和隐藏菜单，而是在鼠标进入菜单区域时显示菜单，当鼠标离开菜单时消失。我设法在mouseenter上显示菜单，但是，只要将鼠标悬停在一个孩子上，菜单就会一直显示并隐藏自己。 JS代码可以在下面的代码片段中看到。

    showLeft.onmouseover = function() {
        classie.toggle( this, 'active' );
        classie.toggle( menuLeft, 'cbp-spmenu-open' );
    };

我做了一些研究，从我的理解是这种现象被称为'冒泡'，我试图通过事件的来源过滤事件的触发器但是我没有成功。任何帮助将不胜感激。

Answer 1

是的，这是由您确定的事件冒泡引起的。

解决问题的最简单方法是使用jQuery，它通过mouseenter/mouseleave事件专门处理这种情况。

$(elem).on("mouseenter", function() {
    // your code
});