In JavaScript:
(在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.
(pageX
, pageY
, screenX
, screenY
, clientX
和clientY
返回一个数字,该数字指示一个点相对于参考点的物理“ CSS像素”的数量。)
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
:
(pageX
和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.(该参考点在URL栏下方,并且在左上方是“后退”按钮。)
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
:
(screenX
和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
:
(clientX
和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
(http://www.quirksmode.org/dom/w3c_cssom.html#t03)
w3schools has an online Javascript interpreter and editor so you can see what each does
(w3schools拥有一个在线Java解释器和编辑器,因此您可以看到各自的功能)
http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy
(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>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…