JQuery使用mousedown和mouseup简单判断鼠标按下与释放位置是否相同

时间:2021-06-05 22:30:26

在JQuery中,我们可以利用mousedown、mouseup来跟踪页面的鼠标按下与释放事件。

如何获取鼠标的位置信息呢?事件event的pageX和pageY属性可以让我们获得鼠标在页面中的具体位置信息,相当于数学坐标系中的xy坐标那样。

于是我们可以先用一个全局变量来记录鼠标按下的位置信息,再在鼠标释放的函数里判断按下的位置与释放的位置是否一致,再根据结果做操作。

示例代码如下:

    var x,y;
$(document).mousedown(function(event){ //获取鼠标按下的位置
x = event.pageX;
y = event.pageY;
});
$(document).mouseup(function(event){//鼠标释放
var newX = event.pageX;
var newY = event.pageY;
if(x==newX && y==newY){
//位置相同的操作
}
else{
//位置不同的操作
}
})