使用 jQuery 检查 mouseleave() 时光标在哪个元素上？答案

【问题标题】：Check what element the cursor is on upon mouseleave() with jQuery?使用 jQuery 检查 mouseleave() 时光标在哪个元素上？
【发布时间】：2011-12-07 08:21:45
【问题描述】：

我有一组列表元素（<ul> 中的<li>）在这样的图表上以气泡形式排列，其中气泡是<li> 元素：

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

我希望能够检测出两者之间的区别

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

我尝试在 .mouseleave() 中使用 $(this) 甚至是气泡，但它注册的是您要离开的元素，而不是您当前悬停的元素。

关于如何获取鼠标在mouseleave() 上移动的元素的任何想法？

【问题讨论】：

标签： javascript jquery nested mouseover mouseleave

【解决方案1】：

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

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

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

【讨论】：

注意编辑我在上面添加的基于@kennebec 的良好调用 - 为确保您具有浏览器兼容性，最好引用 e.toElement || e.relatedTarget 而不仅仅是 e.toElement

【解决方案2】：

如果您可以使用 ordinarey javascript，则每个事件 (e) 鼠标悬停和鼠标移出都有大多数浏览器中的 e.relatedTarget。 #9 之前的 IE 有 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
}

【讨论】：