忽略 JS 中同一元素的子元素的 mouseenter/mouseout 事件答案

【问题标题】：Ignoring mouseenter/mouseout events on children of same element in JS忽略 JS 中同一元素的子元素的 mouseenter/mouseout 事件
【发布时间】：2014-08-13 11:42:01
【问题描述】：

我在我的网站上使用了这个菜单 (http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/)，我稍微修改了它。我不想使用按钮来显示和隐藏菜单，而是在鼠标进入菜单区域时显示菜单并在鼠标离开菜单时消失。我设法在mouseenter 上显示菜单，但是，只要将鼠标悬停在一个孩子上，菜单就会不断显示和隐藏自己。 JS代码见下面sn-p。

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

我做了一些研究，据我了解，这种现象被称为“冒泡”，我尝试通过事件源过滤事件触发器，但没有成功。任何帮助将不胜感激。

【问题讨论】：

标签： javascript html css dom-events mouseover

【解决方案1】：

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

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

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

【讨论】：

工作就像一个魅力，但我不得不使用稍微不同的语法 $(menuLeft).mouseenter(function() { //code });