Kiểm tra phần tử con trỏ nào đang bật trên mouseleave() với jQuery?

Question

Tôi có một tập hợp các yếu tố danh sách (<li> trong một <ul>) đặt ra như bong bóng trên một biểu đồ như thế này, nơi các bong bóng là <li> yếu tố:

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

Tôi muốn để có thể phát hiện các sự khác biệt giữa

1. Di chuyển chuột từ bong bóng # 1 vào lưới
2. Di chuyển chuột từ bong bóng # 1 trực tiếp đến một Nother bong bóng, như bong bóng 2

Tôi đã cố gắng sử dụng $(this) trong .mouseleave() ngay cả đối với một bong bóng, nhưng nó đăng ký các yếu tố mà bạn đang để lại chứ không phải là yếu tố mà bạn hiện đang lơ lửng.

Bất kỳ ý tưởng nào về cách lấy yếu tố mà chuột di chuyển lên trên mouseleave()?

Answer 1

Bạn cần phải sử dụng event.toElement || e.relatedTarget:

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

(Edited để lưu ý || e.relatedTarget để đảm bảo khả năng tương thích trình duyệt)

Answer 2

Nếu bạn có thể sử dụng ordinarey javascript, mỗi sự kiện (e) mouse over và mouse ra có e.relatedTarget trong hầu hết các trình duyệt. IE trướC# 9 có event.toElement và event.fromElement, tùy thuộc vào nếu bạn đang nghe một mouseover hoặc 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 
}