提高onmouseenter/leave事件的可靠性

Question

我在div上使用hover（）來顯示信息面板，當用戶移動鼠標時，這項工作有90％的時間，但有時這些事件似乎不會觸發正確。這似乎與您將鼠標移入或移出div的速度有關。

我已經建立了的jsfiddle顯示我的HTML，JS和CSS在這裏 - http://jsfiddle.net/Y9Hx6/43/

有沒有更好的（更可靠）的方式來實現這一目標？

Answer 1

這是因爲你正在使用的不是thise.target。當你快速移動鼠標時，e.target可能幾乎是任何東西，而在你的情況下，this將始終可靠地引用該圖塊。

這裏是我的解決辦法：

http://jsfiddle.net/Y9Hx6/46/

注意，對於優化的原因，我現在用的事件委託，沒有理由爲每個瓷磚有自己的處理程序。我也改變了它使用mouseentermouseleave所以當你將鼠標懸停在滑動了信息的事件將不會觸發。

代碼：

function slideUp(e) { 
    var info = $(this).find(".info"); 
    info.stop().animate({ 
     top: 200 - info.outerHeight() 
    }, 250); 
} 

function slideDown(e) { 
    $(this).find(".info").stop().animate({ 
     top: 200 
    }, 250); 
} 

$(".wrap").delegate(".tile", "mouseenter mouseleave", function(e){ 
    if(e.type == "mouseenter") { 
    slideUp.call(this, e); 
    } 
    else { 
    slideDown.call(this, e); 
    } 
});