的mouseenter /鼠標離開事件不會觸發

Question

我有這樣的例子在這裏說明情況： http://jsfiddle.net/nubrF/40/

如果按住鼠標到動畫元素的路徑當目標元素通過鼠標指針「下方」時，您可以觀察到事件僅在Firefox中觸發（不在IE，Chrome或Safari中）。

其實我有兩個問題：

1. 這是正常的瀏覽器的行爲？

2. 你推薦什麼方法來模擬這些事件，並在目標元素通過鼠標指針時獲得通知？

我要指出，我已經想過pageX屬性和鼠標，並在頁面元素的位置的pageY但這種方法看起來很複雜，不是很乾淨。

感謝您的幫助。

Answer 1

是的，這是正常的行爲。一種方法可能是放棄mouseleave/mouseenter並將mousemove事件綁定到文檔。從那裏，獲取頁面上的鼠標指針位置和偏移量（），帶有動畫元素的（）和高度（）。如果從mousemove事件保存的最後一個點落入該區域內，則鼠標位於元素中。

每次動畫更新時，您都需要測試它，您可以使用animate step function進行動畫更新。

例如

function myAnimateStepFunc(e,fx) { 
    var $e = $(fx.elem); 
    var p = $e.offset(); 
    var isin = false; 
    if(lastx >= p.left && lasty >= p.top) {   
     isin =(lastx < p.left + $e.width() && lasty < p.top + $e.height());   
    } 

... 

這可能已經足夠了，儘管您可以擴展它，然後觸發mouseleave/mouseenter事件，直接觸發動畫元素。

請注意，您需要將mousemove綁定到整個頁面，因爲您需要更新鼠標在頁面上移動的任何位置的lastx和lasty位置，而不僅僅是在動畫的包含div內。