Javascript 鼠标悬停从 child 冒泡

Question

我有以下 html 设置:

<div id="div1">
<div id="content1">blaat</div>
<div id="content1">blaat2</div>
</div>

它的样式使您不能悬停 div1 而不悬停其他 2 个 div 之一。 现在我在 div1 上有一个 mouseout。
问题是当我从 content1 移动到 content2 时我的 div1.mouseout 被触发，因为它们的 mouseouts 正在冒泡。
并且事件的目标、currentTarget 或 relatedTarget 属性永远不会是 div1，因为它永远不会直接悬停...
我一直在为此疯狂搜索，但我只能找到与我需要的相反的问题的文章和解决方案。这看起来微不足道，但我无法让它工作......
div1 的 mouseout 只应在鼠标离开 div1 时触发。

一种可能性是在鼠标进入和鼠标离开时设置一些数据，但我相信这应该开箱即用，因为它只是一个鼠标离开...

编辑:

bar.mouseleave(function(e) {
                if ($(e.currentTarget).attr('id') == bar.attr('id')) {
                    bar.css('top', '-'+contentOuterHeight+'px');
                    $('#floatable-bar #floatable-bar-tabs span').removeClass('active');
                }
            });

将 mouseout 更改为 mouseleave 并且代码有效...

Answer 1

为此使用mouseleave 事件或mouseout，它会处理您的特定问题。 See here for details

来自关于差异的文档:

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.

示例标记:

<div id="outer">
  Outer
  <div id="inner">
    Inner
  </div>
</div>