javascript 图解 event对象offsetX, clientX, pageX, screenX, layerX, x区别

最新推荐文章于 2025-04-04 23:39:01 发布

熟悉的新风景

最新推荐文章于 2025-04-04 23:39:01 发布

阅读量785

点赞数

分类专栏： # javascript知识点

本文链接：https://blog.csdn.net/weixin_44797182/article/details/98077626

版权

javascript知识点专栏收录该内容

41 篇文章

订阅专栏

本文详细解析了鼠标事件中clientX,clientY,screenX,screenY,offsetX,offsetY等属性的作用及区别，通过实例代码展示了如何获取鼠标在不同坐标系下的位置，适用于网页交互设计与前端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性.所以必然是“鼠标事件”发生时候才会有意义；

一、不同浏览器对这些属性的支持：

在这里插入图片描述

二、作用及其测试

clientX：当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等），鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴的位置；
clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置；
screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；
screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；
offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置
offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置

在这里插入图片描述
x，y的取值和screenX，screenY得到的数相同
测试offsetX：鼠标是在接近demo按钮的左上角点击，可以发现是按照事件源的位置定位

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>显示单击的坐标</title>
		<style>
			body{
				margin: 0;
				padding: 0;
			}
			div{
				width: 500px;
				height: 300px;
				border: 1px solid red;
				
			}
			button{
				width: 100px;
				height:50px;
				margin-top:50px;
			}
		</style>
		<script type="text/javascript">
			document.onmousemove = function(ev) {
				var e = ev || window.event;
				var div = document.getElementById('demo');
				var btn=document.getElementsByTagName("button");
				div.innerHTML = "clientX: " + e.clientX+ ",clientY:" + e.clientY +
					"</br> screenX:" + e.screenX + ",screenY:" + e.screenY;
			}
			window.onload=function(){
			var btn=document.getElementsByTagName("button")[0];
			btn.onclick=function(ev){
				var e = ev || window.event;
				console.log("e.offsetX="+e.offsetX+"\n e.offsetY="+e.offsetY)
			}
			}
		</script>
	</head>
	<body>
		<div id="demo">

		</div>
		<button type="button">测试</button>
	</body>
</html>