发表新帖
发表新帖

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

后端 未结
关注
7 1319
夕颜
夕颜 2020-11-22 13:38

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

Also for iPad Safari,

相关标签:
7条回答
  • 攒了一身酷
    2020-11-22 14:03

    Here's a picture explaining the difference between pageY and clientY.

    pageY vs clientY

    Same for pageX and clientX, respectively.

    pageX/Y coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling),

    while clientX/Y coordinates are relative to the top left corner of the visible part of the page, "seen" through browser window.

    See Demo

    You'll probably never need screenX/Y

    0 讨论(0)
  • 梦谈多话
    2020-11-22 14:03

    What helped me was to add an event directly to this page and click around for myself! Open up your console in developer tools/Firebug etc and paste this:

    document.addEventListener('click', function(e) {
  console.log(
    'page: ' + e.pageX + ',' + e.pageY,
    'client: ' + e.clientX + ',' + e.clientY,
    'screen: ' + e.screenX + ',' + e.screenY)
}, false);
    Click anywhere

    With this snippet, you can track your click position as you scroll, move the browser window, etc.

    Notice that pageX/Y and clientX/Y are the same when you're scrolled all the way to the top!

    0 讨论(0)
  • 旧巷少年郎
    2020-11-22 14:11

    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>

    0 讨论(0)
  • 说谎
    2020-11-22 14:15

    clientX/Y refers to relative screen coordinates, for instance if your web-page is long enough then clientX/Y gives clicked point's coordinates location in terms of its actual pixel position while ScreenX/Y gives the ordinates in reference to start of page.

    0 讨论(0)
  • 借酒劲吻你
    2020-11-22 14:18

    I don't like and understand things, which can be explained visually, by words.

    0 讨论(0)
  • 温柔的废话
    2020-11-22 14:26
    1. pageX/Y gives the coordinates relative to the <html> element in CSS pixels.
    2. clientX/Y gives the coordinates relative to the viewport in CSS pixels.
    3. screenX/Y gives the coordinates relative to the screen in device pixels.

    Regarding your last question if calculations are similar on desktop and mobile browsers... For a better understanding - on mobile browsers - we need to differentiate two new concept: the layout viewport and visual viewport. The visual viewport is the part of the page that's currently shown onscreen. The layout viewport is synonym for a full page rendered on a desktop browser (with all the elements that are not visible on the current viewport).

    On mobile browsers the pageX and pageY are still relative to the page in CSS pixels so you can obtain the mouse coordinates relative to the document page. On the other hand clientX and clientY define the mouse coordinates in relation to the visual viewport.

    There is another stackoverflow thread here regarding the differences between the visual viewport and layout viewport : Difference between visual viewport and layout viewport?

    Another good resource: http://www.quirksmode.org/mobile/viewports2.html

    0 讨论(0)
 看不清?
提交回复
热议问题