如何在jQuery中使用e.pageY在鼠標向上移動而不是向下時執行事件？

Question

好的我試圖在jQuery中創建一個事件來檢測鼠標何時向上移動。我正在使用 e.pageY事件。所以在這種情況下，我希望在鼠標的Y位置小於2時發生事件。我已成功完成該操作。這裏是代碼。

$(document).mousemove(function(e){ 

    if (e.pageY <= 2){ 

     $('#mystuff').show(); 

    }); 

}); 

現在的問題是，當我打開網頁，並上下移動鼠標時，#mystuff顯示自鼠標都要經過一個位置小於2

我只希望#mystuff顯示時鼠標正在向上移動而不是向下移動。

我希望你明白這一點。

感謝。

Answer 1

嘗試類似這樣的事情。

var mouseLastYPos = null; 
$(document).mousemove(function(e){ 
    if(mouseLastYPos){ 
     if (e.pageY < mouseLastYPos && e.pageY <= 2){ 

      $('#mystuff').show(); 

     } 
    } 
    mouseLastYPos = e.pageY; 
});​ 

工作演示 - http://jsfiddle.net/bmHbt/

Answer 2

我不認爲有一種內置的方式來檢測鼠標移動的方式，但你可以用一個隱藏的字段值來存儲鼠標位置和比較以前的位置，這樣的解決方法：

if ($('#hiddenMousePos').val() > e.pageY){ 
    //Your code here 
} 
$('#hiddenMousePos').val(e.pageY); 

並設置hiddenMousePos 0這樣的默認值只會進入狀態，如果前面的e.pageY如果比實際的大。

Answer 3

$(document).mousemove(function(e){ 
    var prevY = $('#mystuff').attr('data-prevY') || 0; 
    if (e.pageY <= prevY){ 
     $('#mystuff').show(); 
    } 
    else { 
     $('#mystuff').hide(); 
    } 
    $('#mystuff').attr('data-prevY', e.pageY); 
}); 

檢查this JSFiddle與工作示例。