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正在冒泡。
并且事件的target，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>

Answer 2

hover方法有两个参数，第一个用于鼠标输入，第二个用于鼠标输出。

$('your_div').hover(function(){
  // your code here.
}, function(){// any mouse out code here})