Javascript Mouseover从孩子们冒泡

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被触发,因为它们的mouseout正在冒泡.
并且事件的目标,currentTarget或relatedTarget属性永远不会是div1,因为它永远不会直接徘徊......
我一直在为此寻找疯狂,但我只能找到与我需要相反的问题的文章和解决方案.它似乎微不足道,但我不能让它工作......
当鼠标离开div1时,div1的mouseout应该只被触发.

其中一种可能性是设置一些关于鼠标输入和鼠标输入的数据,但我确信这应该是开箱即用的,因为它只是一个鼠标输出...

编辑:

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为此,它处理您的具体问题. 详情请见此处

从关于差异的文档:

mouseleave事件与mouseout处理事件冒泡的方式不同.如果在此示例中使用了mouseout,那么当鼠标指针移出Inner元素时,将触发处理程序.这通常是不受欢迎的行为.另一方面,mouseleave事件仅在鼠标离开它所绑定的元素时触发其处理程序,而不是后代.因此,在此示例中,处理程序在鼠标离开Outer元素时触发,而不是Inner元素.

示例标记:

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