使用jQuery，在mouseleave()事件发生时检查鼠标光标所在的元素是什么？

Question

我有一组列表元素（在<ul>中的<li>）以气泡的形式呈现在图表上，如下所示，其中气泡即为<li>元素：

http://i.stack.imgur.com/PR7vR.png

我想要能够检测以下两种情况的差异：

1. 将鼠标从气泡#1移动到网格上
2. 直接将鼠标从气泡#1移动到另一个气泡，例如气泡2

我尝试在气泡的.mouseleave()事件中使用$(this)，但它记录的是你正在离开的元素而不是你当前悬停的元素。

有没有想法在mouseleave()事件中获取鼠标移动到的元素？

- Tyler Nieman

Answer 1

您需要使用 event.toElement || e.relatedTarget:

$('li').mouseleave(function(e)
{
    // new element is: e.toElement || e.relatedTarget
});

（已编辑以注意 || e.relatedTarget，以确保浏览器兼容性）

- N Rohler

---

注意编辑：根据@kennebec的良好建议，为了确保您具有浏览器兼容性，最好引用 e.toElement || e.relatedTarget 而不仅仅是 e.toElement。 - N Rohler

e.relatedTarget 是官方解决方案：https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/relatedTarget - Taurus

Answer 2

如果您能使用普通的JavaScript，大多数浏览器中每个事件（e）鼠标悬停和鼠标移出都有一个e.relatedTarget。IE 9之前有event.toElement和event.fromElement，具体取决于您是否正在监听mouseover或mouseout事件。

somebody.onmouseout=function(e){
  if(!e && window.event)e=event;
  var goingto=e.relatedTarget|| event.toElement;
  //do something
}
somebody.onmouseover=function(e){
  if(!e && window.event)e=event;
  var comingfrom=e.relatedTarget|| e.fromElement;
  //do something
}

- kennebec