JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试 - js - 前端 - 技术设计

首先需要知道 clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性.

之前也一直对这些属性搞的稀里糊涂，看文档上说的也是不太理解，反正看完一头雾水，所以自己动手亲自测试了一下；说一下自己的理解；clientX,clientY,screenX,screenY,offsetX,offsetY 这几个属性是 “鼠标事件对象” 下的属性，所以必然是 “鼠标事件” 发生时候才会有意义；

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

下面我将结合我的测试代码和结果对上面的话进行解释

这是我写的测试例子的 html 代码

	<body>
	<span style="white-space:pre"> </span><div id="div" class="container"></div>
	<span style="white-space:pre"> </span><!--<div id="div1" class="container"></div>
	<span style="white-space:pre"> </span><input type="button" value="test" οnclick="test();">-->
	</body>

添加一点样式

	<style>
	*{padding: 0;margin: 0;}
	.container{
	width: 200px;height: 100px;
	border: 1px solid #c00;
	}
	input[type="button"]{
	margin: 50px;
	border: none;
	width: 100px;height: 50px;background: green;
	}
	</style>

接下来是 js 部分的代码

	<script>
	document.onmousemove = function (ev) {
	var e = ev \|\| window.event;
	var div = document.getElementById('div');
	div.innerHTML = "clientX: "+e.clientX + ",clientY:"+ e.clientY +
	"</br> screenX:"+ e.screenX+",screenY:" + e.screenY;
	}

	/* function test(ev) {
	var e = ev \|\| window.event;
	var div1 = document.getElementById('div1');
	div1.innerHTML = "offsetX:"+ e.offsetX +",offsetY : "+ e.offsetY;
	}*/
	</script>