JS：clientX/Y、screenX/Y、pageX/Y、offsetX/Y、layerX/Y、x/y

最新推荐文章于 2023-09-05 20:20:35 发布

鬼眼邪神

最新推荐文章于 2023-09-05 20:20:35 发布

阅读量1.4k

点赞数

分类专栏： JS 文章标签： javascript client screen offset page

本文链接：https://blog.csdn.net/u010200222/article/details/45622685

版权

JS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Event对象

Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

Event对象只在事件发生的过程中才有效。

浏览器兼容性

FF：没有window.event对象。可以通过给函数的参数传递event对象。

示例代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>鬼眼邪神的博客</title>
</head>

<body>
	<input type="button" name="" value="按钮" id="button"/>
	<script>
		var button=document.getElementById("button");

		button.οnclick=function (event){
		var event=window.event||event;
		alert(event.clientX);
		}
	</script>
</body>
</html>

clientX

clientX事件属性返回当事件被触发时鼠标指针相对于浏览器窗口（有效显示区域，不含滚动条）的水平坐标。

clientY

clientY事件属性返回当事件被触发时鼠标指针相对于浏览器窗口（有效显示区域，不含滚动条）的垂直坐标。

测试clientX、clientY及其它事件属性用到的代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>鬼眼邪神的博客</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		body {
			margin:0 0 0 100px;
			width:200px;
			height:800px;
			border:5px solid #000;
			background:yellow;
		}
		.green {
			position:relative;
			margin:50px auto;
			padding:20px;
			width:80px;
			height:80px;
			border:10px solid #000;
			background:rgb(0,255,0);
		}
		.red {
			width:1px;
			height:1px;
			background:rgb(255,0,0);
		}
		.con {
			width:200px;
			height:100px;
		}
	</style>
	<script>
		(function(){
			window.οnlοad=function (){
				var con=document.getElementById("con");

				document.οnclick=function (event){
					var event=window.event||event;

					con.innerHTML=
						"clientX="+event.clientX+"，"+
						"clientY="+event.clientY+"<br/>"+
						"screenX="+event.screenX+"，"+
						"screenY="+event.screenY+"<br/>"+
						"pageX="+event.pageX+"，"+
						"pageY="+event.pageY+"<br/>"+
						"offsetX="+event.offsetX+"，"+
						"offsetY="+event.offsetY+"<br/>"+
						"layerX="+event.layerX+"，"+
						"layerY="+event.layerY+"<br/>"+
						"x="+event.x+"，"+
						"y="+event.y+"<br/>";
				}
			}
		})();
	</script>
</head>

<body id="body">
	<div class="green" id="green">
		<div class="red"></div>
	</div>
	<div class="con" id="con"></div>
</body>
</html>

下图中显示了页面滚动前后用鼠标点击绿色块上的红点时clientX和clientY。

浏览器兼容性

各浏览器都支持。在IE7中，clientX和clientY的计算起点不是浏览器窗口的有效显示区域，而是包括了有效显示区域边缘的2px的边框。

下图中的红色方框所在的位置是clientX和clientY的计算起点，而黄色的部分是浏览器窗口的有效显示区域。

screenX

screenX事件属性返回事件发生时鼠标指针相对于屏幕的水平坐标。

screenY

screenY事件属性返回事件发生时鼠标指针相对于屏幕的垂直坐标。

浏览器兼容性

所有的浏览器都支持，并且解释都一样。

pageX

pageX事件属性返回事件发生时鼠标指针相对于页面的水平坐标。不随页面滚动而发生变化。

pageY

pageY事件属性返回事件发生时鼠标指针相对于页面的垂直坐标。不随页面滚动而发生变化。

浏览器兼容性

只有IE不支持。解决方法是pageX/Y=clientX/Y+（页面滚去的宽度/高度）。

知识扩展

对于获取页面滚动条滚动的高度，除IE外的浏览器可以通过window对象的pageXOffset/pageYOffset属性来获取。对于IE来说就比较麻烦一点，它依赖当前文档类型。文档类型分为Standards Mode和Quirks Mode，页面声明了DOCTYPE时为Standards Mode，反之为Quirks Mode。可以使用document.compatMode来获取，该方法也同时支持其它浏览器，其返回值为BackCompat或CSS1Compat。

当文档类型为Standards Mode，获取方式为：document.documentElement.scrollTop；而Quirks Mode时则为：document.body.scrollTop。

示例代码：

function scrollLeft(){
    if ('pageXOffset' in window) {
        return window.pageXOffset;
    } else if (document.compatMode === "BackCompat") {
        return document.body.scrollLeft;
    } else {
        return document.documentElement.scrollLeft;
    }
}

offsetX

offsetX事件属性返回发生事件的地点在事件源元素的坐标系统中的x坐标。

offsetY

offsetY事件属性返回发生事件的地点在事件源元素的坐标系统中的y坐标。

浏览器兼容性

在Chrome、Safari、Opera中，事件源元素的坐标系统从border-box开始
在IE中，事件源元素的坐标系统从content-box开始。如果鼠标指针在border上，则会出现负值。
FireFox不支持。
在IE7中，页面的坐标系统也包括了浏览器窗口的有效显示区域边缘的2px的灰色边框，但是起点还是和其它浏览器一样，即页面左上角（不包括灰色边框）。如果点击灰色边框，则会出现负值。

layerX

layerX事件属性返回鼠标相比较于当前坐标系的x坐标，即如果触发元素没有定位属性，以页面为参考点。如果有，将改变参考坐标系，以触发元素的border-box的左上角为参考点。

layerY

layerY事件属性返回鼠标相比较于当前坐标系的y坐标，即如果触发元素没有定位属性，以页面为参考点。如果有，将改变参考坐标系，以触发元素的border-box的左上角为参考点。

浏览器兼容性

只有IE不支持。

x

x事件属性返回鼠标相比较于当前坐标系的x坐标。

y

y事件属性返回鼠标相比较于当前坐标系的y坐标。

浏览器兼容性

FireFox不支持。
在Chrome、Safari、Opera中，始终以页面为参考系。
在IE中，如果触发元素没有定位属性，以页面为参考点；如果有，将改变参考坐标系，以触发元素的border区域的左上角为参考点。
在IE8中，页面和触发元素的坐标系统的起点则比其它浏览器下移了2px。当点击页面起点时，结果是（-2，-2）。当点击触发元素的border-box的左上角时，结果是（-2，-2）。
在IE7中，（1）当以页面为参考时，页面的坐标系统也包括了浏览器窗口的有效显示区域边缘的2px的灰色边框，但是起点还是和其它浏览器一样，即页面左上角（不包括灰色边框）；如果点击灰色边框，则会出现负值。（2）当以触发元素为参考时，触发元素的坐标系统的起点则比其它浏览器下移了2px。当点击触发元素的border-box的左上角时，结果是（-2，-2）。