Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
220 views
in Technique[技术] by (71.8m points)

javascript - screenX / Y,clientX / Y和pageX / Y有什么区别?(What is the difference between screenX/Y, clientX/Y and pageX/Y?)

What is the difference between screenX / Y , clientX / Y and pageX / Y ?

(screenX / YclientX / YpageX / Y什么pageX ?)

Also for iPad Safari, are the calculations similar as on desktop—OR there is some difference because of viewport?

(另外,对于iPad Safari,计算结果是否与台式机相似?还是因为视口而有所不同?)

It would be great if you could point me to an example.

(如果您能指出一个例子,那就太好了。)

  ask by hmthr translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.

(pageXpageYscreenXscreenYclientXclientY返回一个数字,该数字指示一个点相对于参考点的物理“ 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 :

(pageXpageY)


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 :

(screenXscreenY)


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 :

(clientXclientY)


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> 


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...