JavaScript鼠标悬停事件的子元素冒泡问题

Question

我有以下HTML设置：

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

这段代码的意思是，如果你没有将鼠标悬停在另外两个div之一上，你是无法悬停在div1上的。 现在我在div1上设置了一个mouseout事件。
问题是，当我从content1移动到content2时，div1.mouseout会被触发，因为它们的mouseout事件正在冒泡。 而且，事件的target、currentTarget或relatedTarget属性永远不是div1，因为它从来没有直接被悬停过...
我已经疯狂地搜索了这个问题，但我只能找到与我需要相反的问题的文章和解决方案。这似乎是微不足道的，但我做不到...
当鼠标离开div1时，div1.mouseout应该只被触发一次。

其中一种可能的方法是在鼠标进入和离开时设置一些数据，但我相信这应该可以直接解决，因为这只是一个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，代码就可以正常工作...

- NDM

---

请发布您的jQuery代码，没有它很难提供帮助。 - Nick Craver

Answer 1

使用 mouseleave 事件或者 mouseout 来解决这个问题，它们可以处理你的具体问题。详情请参见这里。

根据文档中的说明：

鼠标移出事件（mouseleave）和鼠标离开事件（mouseout）在处理事件冒泡方面有所不同。如果在此示例中使用了 mouseout，则当鼠标指针移出 Inner 元素时，将触发处理程序，这通常是不可取的行为。另一方面，只有当鼠标离开绑定的元素而不是后代元素时，mouseleave事件才会触发其处理程序。因此，在此示例中，处理程序仅在鼠标离开 Outer 元素时触发，而不是在鼠标离开 Inner 元素时触发。

示例标记：

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

- Nick Craver

---

谢谢，mouseleave确实解决了问题，并且填充了我需要的event.currentTarget，如果有人感兴趣，我已经在我的帖子中更新了代码。 - NDM

jQuery支持mouseenter和mouseleave事件，但这两个事件在旧版浏览器中的兼容性可能会存在问题。 - Marcy Sutton

Answer 2

hover方法有两个参数，第一个是鼠标移入时触发的事件，第二个是鼠标移出时触发的事件。

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

- Sarfraz

---

他想让鼠标离开时能够正确触发...你只使用了mousenter参数，不确定这有什么帮助？ - Nick Craver

@nick：我刚刚举了一个例子，他应该注意这个。谢谢。 - Sarfraz