What's the difference between screenx/y, clientx/

Source: Internet
Author: User

In JavaScript:

PageX, Pagey, ScreenX, ScreenY, ClientX and ClientY returns a number which indicates the number of physical "css Pixels" a Point was from the reference point. The event point is where the user clicked, and the reference point was 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-below the URL bar and Back button in the upper left. This point could is anywhere in the browser window and can actually change location if there is 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 N Umber 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 is 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 a online Javascript interpreter and editor so you can see how each does

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



<!  DOCTYPE html>


What's the difference between screenx/y, clientx/

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.