JQuery开发5-在网页中获取鼠标的三种坐标

在开发过程中。有时候会获取鼠标当前的坐标,主要分为三种,第一种是获取鼠标在屏幕中的坐标,第二种是获取鼠标在客户区中的坐标,第三种是获取鼠标在窗口页面中的坐标。

分别用的方法名称为screenX和screenY,clientX和clientY,pageX和pageY。

属性说明

  • clientX/clientY

    名称 说明 返回
    clientX 返回事件触发时鼠标相对于元素视口 的X坐标 数值
    clientY 返回事件触发时鼠标相对于元素视口 的Y坐标 数值

    这里的元素视口实际上代指就是浏览器,clientX是鼠标距离浏览器左边框的距离,clientY是鼠标距离浏览器上边框的距离。当鼠标停留在页面某个位置时,滚动鼠标滚动条,坐标会随着鼠标滚动条的改变而改变。

  • screenX/screenY

    名称 说明 返回
    screenX 返回事件触发时鼠标相对于屏幕 的X坐标 数值
    screenY 返回事件触发时鼠标相对于屏幕 的Y坐标 数值

    顾名思义,screenX是鼠标距离显示器屏幕左边框的距离,screenY是鼠标距离显示器屏幕上边框的距离。

  • pageX/pageY

    名称 说明 返回
    pageX 返回事件触发时鼠标相对于文档 的X坐标 数值
    pageY 返回事件触发时鼠标相对于文档 的Y坐标 数值
     

    如果鼠标停留在网页中的某个位置,滚动鼠标滚动条,pageY不会因为鼠标滚动的滚动而改变。

  • 参考代码如下
  • <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <script language="javascript"
    	src="${pageContext.request.contextPath}/script/jquery.js"></script>
    <script type="text/javascript">
    	$(document).ready(function() {
    		$(document).mousemove(function(e) {
    			getScreenCoordinates(e);//获取鼠标在屏幕中的坐标
    			getClientCoordinates(e);//获取鼠标在窗口客户区中的坐标,会随着滚动条的滚动而变化
    			getPageCoordinates(e);//获取鼠标当前页面区域中的坐标,不会随滚动条滚动而变化
    		});
    		function getScreenCoordinates(e) {
    			x1 = e.screenX;
    			y1 = e.screenY;
    			$(".sp1").text("X1:" + x1 + ",Y1:" + y1);
    		}
    		function getClientCoordinates(e) {
    			x2 = e.clientX;
    			y2 = e.clientY;
    			$(".sp2").text("X2:" + x2 + ",Y2:" + y2);
    		}
    		function getPageCoordinates(e) {
    			x3 = e.pageX;
    			y3 = e.pageY;
    			$(".sp3").text("X3:" + x3 + ",Y3:" + y3);
    		}
    	});
    </script>
    </head>
    <body>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    	<p>
    		鼠标当前屏幕的坐标为:<span class="sp1"></span>
    	</p>
    	<p>
    		鼠标当前窗口客户区坐标为:<span class="sp2"></span>
    	</p>
    	<p>
    		鼠标当前页面区域中的坐标为:<span class="sp3"></span>
    	</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    	<p>test</p>
    </body>
    </html>
    
     

你可能感兴趣的:(jquery)