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

Ignoring mouseenter/mouseout events on children of same element in JS

本文关键字：元素 mouseenter mouseout 事件 JS 忽略      更新时间：2023-09-26

我在我的网站上使用这个菜单(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' );
    };

我做了一些研究，据我所知，这种现象被称为"冒泡"，我试图通过事件源过滤事件的触发因素，但我没有成功。

是的，这是由您所识别的事件冒泡引起的。

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

$(elem).on("mouseenter", function() {
    // your code
});
相关文章：