如何在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与工作示例。