彻底理解javascript 中的事件对象的pageY, clientY, screenY的区别和联系。

最新推荐文章于 2022-06-08 21:14:25 发布

转载最新推荐文章于 2022-06-08 21:14:25 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/oxspirt/p/8807254.html

文章标签：

#javascript #ViewUI

本文详细解释了JavaScript中鼠标事件的不同坐标系统，包括pageX/pageY、screenX/screenY及clientX/clientY的区别与应用场景，并通过实例代码展示了这些坐标的具体用法。

说到底， pageY, clientY, screenY的计算，就是要找到参考点，它们的值就是：鼠标点击的点----------- 和参考点指点----------的直角坐标系的距离

stackoverflow上面有个回答，讲解的非常清晰。

offsetX and offsetY are relative to the parent container, whereas pageX and pageY are relative to the document

// rect is a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height
var rect = obj.getBoundingClientRect();

https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y

<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Canvas Drag and Drop Test</title>
</head>
<body>
<style>
    .div1{
        height: 3000px;
        background-color: yellow;
    }
    .div2{
        height: 400px;
        background-color: lightsalmon;
    }
    .div3{
        width: 200px;
        height: 200px;
        background-color: lightblue;
    }
</style>
<div class="div1">
    <div class="div2">
        <div class="div3">

        </div>
    </div>
</div>
<script>
	document.getElementsByClassName('div3')[0].addEventListener('mousedown', function(e){
		console.log("pageY", e.pageY);
		console.log("clientY", e.clientY);
		console.log("screenY", e.screenY);
	})
</script>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------------

In JavaScript:

pageX, pageY, screenX, screenY, clientX and clientY returns a number which indicates the number of physical "css pixels" a point is from the reference point. The event point is where the user clicked, the reference point is a point in the upper left. These properties return the horizontal and vertical distance from that reference point.

pageX and pageY:
Relative to the top left of the fully rendered content area in the browser. This reference point is below the url bar and back button in the upper left. This point could be anywhere in the browser window and can actually change location if there are embedded scrollable pages embedded within pages and the user moves a scrollbar.

screenX and screenY:
Relative to the top left of the physical screen/monitor, this reference point only moves if you increase or decrease the number of monitors or the monitor resolution.

clientX and clientY:
Relative to the upper left edge of the content area (the viewport) of the browser window. This point does not move even if the user moves a scrollbar from within the browser.

For a visual on which browsers support which properties:

http://www.quirksmode.org/dom/w3c_cssom.html#t03

w3schools has an online Javascript interpreter and editor so you can see what each does

http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy

<!DOCTYPE html>
<html>
<head> <script> function show_coords(event) { var x=event.clientX; var y=event.clientY; alert("X coords: " + x + ", Y coords: " + y); } </script> </head> <body> <p onmousedown="show_coords(event)">Click this paragraph, and an alert box will alert the x and y coordinates of the mouse pointer.</p> </body> </html>