js(jquery)如何在鼠标高速移动中精确获得鼠标的位置

[Waitforsniping]

$(document).ready(function(){
	$(document).mousemove(function(e){
	    $("#testspan").text(e.pageX + ", " + e.pageY);
	});
});

以上这段为w3cschool提供的获得鼠标位置的代码，不过我发现，鼠标在高速移动过程中（即猛地一下滑出屏幕）之后，鼠标获得的值并没有相应的变成0，据说.pageX只支持ff（其他的我没用），不过复杂的js我也在网上copy下来试过了，还是不能得到这个效果，我想问：有人遇到过这个问题吗？怎么解决的？

[香蕉猪]

没什么好想法，但是如果楼主想要鼠标离开页面之后，坐标变成0。。。 那不如试试手动控制为0： $(document).mouseout(function(e){ e.pageX=0;e.pageY=0; $("#testspan").text(e.pageX + ", " + e.pageY); });

[Waitforsniping]

引用 1 楼 hch126163 的回复:

$("#testspan").text(e.pageX + ", " + e.pageY); 修改了页面元素显示，浏览器渲染页面的速度没有鼠标滑动的速度快。 解决方式：1、 减慢滑动 2、加快浏览器渲染

我们不知道用户的操作习惯，所以减慢滑动这一条不太可行，至于第2条，浏览器渲染好深奥……

[Waitforsniping]

引用 3 楼 gy127132060 的回复:

没什么好想法，但是如果楼主想要鼠标离开页面之后，坐标变成0。。。 那不如试试手动控制为0： $(document).mouseout(function(e){ e.pageX=0;e.pageY=0; $("#testspan").text(e.pageX + ", " + e.pageY); });

这是一个好方法，不过我要做的效果类似qq浮动在屏幕上方边缘的那种，mouseout一下子就四个方向了

[天际的海浪]

引用 5 楼 qq542369628 的回复:

[quote=引用 3 楼 gy127132060 的回复:] 没什么好想法，但是如果楼主想要鼠标离开页面之后，坐标变成0。。。 那不如试试手动控制为0： $(document).mouseout(function(e){ e.pageX=0;e.pageY=0; $("#testspan").text(e.pageX + ", " + e.pageY); });

这是一个好方法，不过我要做的效果类似qq浮动在屏幕上方边缘的那种，mouseout一下子就四个方向了[/quote] 可以根据最后一次获取鼠标的位置离哪条边最近来判断是从哪个方向移出的

[Waitforsniping]

引用 6 楼 jslang 的回复:

[quote=引用 5 楼 qq542369628 的回复:] [quote=引用 3 楼 gy127132060 的回复:] 没什么好想法，但是如果楼主想要鼠标离开页面之后，坐标变成0。。。 那不如试试手动控制为0： $(document).mouseout(function(e){ e.pageX=0;e.pageY=0; $("#testspan").text(e.pageX + ", " + e.pageY); });

这是一个好方法，不过我要做的效果类似qq浮动在屏幕上方边缘的那种，mouseout一下子就四个方向了[/quote] 可以根据最后一次获取鼠标的位置离哪条边最近来判断是从哪个方向移出的[/quote]其实我在5楼说错了，浏览器窗口最大化的时候只有上下两个方向，可以用你说的方法，问题是不是最大化情况下，确实是四个方向了，不怎么好判断，而且容易出错

[天际的海浪]

这样试试

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="testspan"></div>
<script type="text/javascript">
$(document).mouseleave(function(e){
	$("#testspan").text(e.pageX + ", " + e.pageY);
	if (e.pageY<=0)
		alert("鼠标从上方移出");
})
</script>

[hch126163]

$("#testspan").text(e.pageX + ", " + e.pageY); 修改了页面元素显示，浏览器渲染页面的速度没有鼠标滑动的速度快。 解决方式：1、 减慢滑动 2、加快浏览器渲染

[KK3K2005]

是的 你猛的一下 画出屏幕 鼠标很可能就是 从当前点 直接跳到 屏幕外 鼠标的指针在轨迹之间 是跳动的 不是 过渡的

[天际的海浪]

引用 9 楼 qq542369628 的回复:

[quote=引用 8 楼 jslang 的回复:] 这样试试

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="testspan"></div>
<script type="text/javascript">
$(document).mouseleave(function(e){
	$("#testspan").text(e.pageX + ", " + e.pageY);
	if (e.pageY<=0)
		alert("鼠标从上方移出");
})
</script>

我就是这样写的啊，而且还加了导航栏隐藏的效果：

$(document).mousemove(function(e){
	    $("#testspan").text(e.pageX + ", " + e.pageY + ":" + e.screenY);
	    if((e.pageY <= 0) || (e.screenY <= 0))
	    {
	    	$(".pg_header").css("top", "2px");
	    	$(".top-left").css("top", "72px");
	    	$(".top-right").css("top", "72px");
	    }
	    else if(e.pageY > $(".pg_hd_size").height())
	    {
	    	$(".pg_header").css("top", "-300px");
	    	$(".top-left").css("top", "6px");
	    	$(".top-right").css("top", "6px");
	    }
	});

[/quote] 这样不行。你用mousemove事件是不行的。 mousemove事件是无法获取event.pageY小于0的，或者说当event.pageY小于0的时候，mousemove事件不可能被触发。 要用mouseleave或mouseout事件才行

[Waitforsniping]

引用 8 楼 jslang 的回复:

这样试试

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="testspan"></div>
<script type="text/javascript">
$(document).mouseleave(function(e){
	$("#testspan").text(e.pageX + ", " + e.pageY);
	if (e.pageY<=0)
		alert("鼠标从上方移出");
})
</script>

我就是这样写的啊，而且还加了导航栏隐藏的效果：

$(document).mousemove(function(e){
	    $("#testspan").text(e.pageX + ", " + e.pageY + ":" + e.screenY);
	    if((e.pageY <= 0) || (e.screenY <= 0))
	    {
	    	$(".pg_header").css("top", "2px");
	    	$(".top-left").css("top", "72px");
	    	$(".top-right").css("top", "72px");
	    }
	    else if(e.pageY > $(".pg_hd_size").height())
	    {
	    	$(".pg_header").css("top", "-300px");
	    	$(".top-left").css("top", "6px");
	    	$(".top-right").css("top", "6px");
	    }
	});

[ForUSmile]

菜鸟学习一下

[Waitforsniping]

引用 10 楼 jslang 的回复:

[quote=引用 9 楼 qq542369628 的回复:] [quote=引用 8 楼 jslang 的回复:] 这样试试

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="testspan"></div>
<script type="text/javascript">
$(document).mouseleave(function(e){
	$("#testspan").text(e.pageX + ", " + e.pageY);
	if (e.pageY<=0)
		alert("鼠标从上方移出");
})
</script>

我就是这样写的啊，而且还加了导航栏隐藏的效果：

$(document).mousemove(function(e){
	    $("#testspan").text(e.pageX + ", " + e.pageY + ":" + e.screenY);
	    if((e.pageY <= 0) || (e.screenY <= 0))
	    {
	    	$(".pg_header").css("top", "2px");
	    	$(".top-left").css("top", "72px");
	    	$(".top-right").css("top", "72px");
	    }
	    else if(e.pageY > $(".pg_hd_size").height())
	    {
	    	$(".pg_header").css("top", "-300px");
	    	$(".top-left").css("top", "6px");
	    	$(".top-right").css("top", "6px");
	    }
	});

[/quote] 这样不行。你用mousemove事件是不行的。 mousemove事件是无法获取event.pageY小于0的，或者说当event.pageY小于0的时候，mousemove事件不可能被触发。 要用mouseleave或mouseout事件才行 [/quote]

引用 11 楼 Anmie123 的回复:

菜鸟学习一下

搞定了，用的mouseleave方法，可以说是取巧吧，判断鼠标离开页面时距离上边缘最近的话，显示导航栏，鼠标在页面内移动时如果距离页面顶端的距离大于导航栏的高度，则隐藏导航栏，代码如下：

//This is for navigation bar hide.
	$(document).mouseleave(function(e){
		$("#testspan").text(e.pageX + ", " + e.pageY + ", " + $(window).height() + ", " + $(window).width());
			if(e.pageX <= $(window).height())
			{
				if(e.pageY < e.pageX)
				{
					$(".pg_header").css("top", "2px");
			    	$(".top-left").css("top", "72px");
			    	$(".top-right").css("top", "72px");
				}
			}
			else{
				if(e.pageY < ($(window).width() -e.pageX)){
					$(".pg_header").css("top", "2px");
			    	$(".top-left").css("top", "72px");
			    	$(".top-right").css("top", "72px");
				}
			}
	    	
	    });
	//This is for navigation bar show.
	$(document).mousemove(function(e){
	    	if(e.pageY > $(".pg_hd_size").height())
		    {
		    	$(".pg_header").css("top", "-300px");
		    	$(".top-left").css("top", "6px");
		    	$(".top-right").css("top", "6px");
		    }
	    });