e.pageX,e.clientX.e.screenX.offsetLeft,scrollTop事件的区别

最新推荐文章于 2024-07-31 09:25:22 发布

原创最新推荐文章于 2024-07-31 09:25:22 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面使用JavaScript来捕获并显示鼠标移动事件的位置信息，包括相对于浏览器窗口的位置(pageX, pageY, clientX, clientY)以及相对于屏幕的位置(screenX)。文章通过具体代码示例解释了不同鼠标位置属性的区别。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>client</title>
</head>
<body>
	<script>
		document.onmousemove = function(e){
			var e = event||window.event;
			document.write(e.pageX);//相对于浏览器左上角
			document.write(e.clientX);//相对于浏览器左上角
			document.write(e.screenX)//相对于屏幕

		}
		//e.pageY如果有上下左右滚动条的话，e.pageY会累加滚动条的长度，而e.clientY不会
		//style.left是字符串。计算一般用offsetLeft
		//offsetHeight是对象属性，如果父元素有定位，(position:absolute/relative)那么它就是相对于父元素的。如果父元素没有定位，那么就是相对于body的
		//scrollTop页面利用滚动条滚动到下方时，隐藏在滚动条上方页面的高度。
	</script>
</body>
</html>