JavaScript | 事件处理程序中event的位置属性总结

本文中涉及的位置属性：

clientX & clientY （元素相对于视口的坐标）

pageX & pageY （元素在滚动轴滚动的情况下相对于文档的坐标）

offsetX & offsetY （相对于元素自身的坐标）

screenX & screenY （鼠标点击除相对于整个PC桌面的坐标）

scrollLeft & scrollTop || pageXOffset & pageOffset （滚动轴在水平方向和垂直方向上划过的距离）

【番外】

pageXOffset 和 pageYOffset 为IE的属性(只支持IE8以上版本，真是个短命的属性(￣▽￣)／）

在Chrome和Firefox 中都不支持，而ScrollLeft & ScrollTop 则是所有浏览器都通用的

【补充】

screenLeft & screenTop （使用对象为 “window”）

首先先来认识两个概念：

文档坐标：可以简单的理解为元素在html文档中的坐标

视口坐标：元素在浏览器可视窗口中的坐标

这么一罗列下来感觉好多，那就做个试验来看看各属性在浏览器的具体实现吧

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>各坐标位置</title>
	<script type="text/javascript" src="EventUtil.js"></script>
	<style type="text/css" media="screen">
		*{
			margin: 0;
			padding: 0;
		}	

		div {
			margin: 50px;
			background-color:#99CC99; 
			height:200px; 
			width: 200px;
			overflow: scroll;
		}
	</style>
</head>
<body>
	<div id="div1"></div>
</body>
</html>

var div = document.getElementById("div1");
EventUtil.addHandler(div,"click",function(event){
    //EventUtil 为我们为实现浏览器兼容创建的一个对象
	event = EventUtil.getEvent(event);
	var target = EventUtil.getTarget(event);
	//视口坐标位置
	console.log("Client coordinates:" + event.clientX +","+ event.clientY);

	//文档坐标位置(在页面没有滚动的情况下，文档坐标与视口坐标的值相等)
	console.log("Page coordinates:" + event.pageX + "," + event.pageY);

	//相对于元素自身的位置
	console.log("Element Self coordinate:" + event.offsetX + ","+ event.offsetY);

	//屏幕坐标位置(相对于整个PC桌面)
	console.log("Screen coordinates:" + event.screenX + "," + event.screenY);

	//有滚动条的情况下，滚动条的位移情况（垂直位移&水平位移）
	console.log("Scroll coordinate:" + target.scrollLeft + ","+ target.scrollTop);
});

从结果中可以看出：

因为没有滚动条的原因所page coordinates 与 Client coordinates 的坐标是相同的，

其中疑问较大的是screen coordination，它表示鼠标相对于PC桌面的坐标

再次点击，可以看到Screen coordinates包含了浏览器位移的这段距离，所以这样看来screenX & screenY 属性还是比较特殊的

除了以上，需要注意的一点是scrollLeft & scrollTop的使用对象是HTML元素，而非event事件，并且其对象的css样式中需要将overflow 值设置为hidden,auto,scroll ，不可为visible。

以上，欢迎补充与指正！

JavaScript | 事件处理程序中event的位置属性总结

猜你喜欢