使用 jQuery 检查 mouseleave() 时光标在哪个元素上?
Posted
技术标签:
【中文标题】使用 jQuery 检查 mouseleave() 时光标在哪个元素上?【英文标题】:Check what element the cursor is on upon mouseleave() with jQuery? 【发布时间】:2011-12-07 08:21:45 【问题描述】:我有一组列表元素(<ul>
中的<li>
)在这样的图表上以气泡形式排列,其中气泡是<li>
元素:
http://i.stack.imgur.com/PR7vR.png
我希望能够检测出两者之间的区别
-
将鼠标从气泡 #1 移动到网格
将鼠标从气泡 #1 直接移动到另一个气泡,例如气泡 2
我尝试在 .mouseleave()
中使用 $(this)
甚至是气泡,但它注册的是您要离开的元素,而不是您当前悬停的元素。
关于如何获取鼠标在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
【讨论】:
以上是关于使用 jQuery 检查 mouseleave() 时光标在哪个元素上?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 if hasClass 条件禁用 jQuery mouseleave 事件? //悬停动画
Jquery hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别
Jquery:如果 mouseleave = true 则执行此操作