It is unfortunate that I did not know about this until just recently - I am quite sure that I have posted a lot of code that accidentally relied on the proprietary event properties, clientX and clientY.ĭeep thoughts by - jQuery Mouse Events: PageX/Y vs. In order to keep your code as cross-browser compatible as possible, you should rely on pageX and pageY. It returns a double floating-point value denoting the coordinate. clientX and clientY: Relative to the upper left edge of the content area ( the viewport) of the browser window. The differences and the use case of these properties are described below: The screenX and screenY property: The screenX and screenY are read-only properties that provide horizontal and vertical coordinates respectively relative to the global, or screen coordinates. The differences between clientX and clientY and screenX and screenY. 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. Which mouse event coordinates you should be using is not really a question for debate - the pageX and pageY coordinates are the ones that have been standardized by jQuery. The clientX property returns the horizontal client coordinate of the mouse pointer. This immersive format takes traditional moviegoing a step further, by surrounding the audience with a 270-degree panoramic visual and putting them in the center of the action. Client Browser viewport client ( clientX/Y) If you click in the upper-left corner, the value will always be (0,0) regardless of the scroll position'. Regal is changing the entertainment landscape with ScreenX: a revolutionary, multi-projection theatre experience that extends the screen to the auditorium walls. The pageX and pageY coordinates, on the other hand, give me the mouse position relative to the top, left of the entire document, again regardless of the scrolling. Screen Full Screen monitor ( screenX/Y) The position will always be relative to the viewport of the physical screen. And, when I scroll both right and down, and then click on the document, I get the following console output:Īs you can see, the clientX and clientY coordinates give me the mouse position relative to the view port, regardless of the scroll of the document. NOTE: These are the onesĪs you can see, I create a 2000 x 2000 pixel grid that will give me both horizontal and vertical scrolling. can see what kind of coordinates we have to play Bind the mouse event to the document so that we Create the grid for coordinate affordance. When you trap events on the window, document, or other roomy elements, you can get the coordinates of that event (e.g.// When the DOM is ready, initialize the scripts. JavaScript let screenLog = document.querySelector('#screen-log') ĭocument.addEventListener('mousemove', logKey) HTML Move your mouse to see its position. ![]() This example displays your mouse's coordinates whenever you trigger the mousemove event. ![]() See the "Browser compatibility" section for details. Early versions of the spec defined this as an integer referring to the number of pixels. Syntax var x = instanceOfMouseEvent.screenXĪ double floating point value. ![]() ![]() The screenX read-only property of the MouseEvent interface provides the horizontal coordinate (offset) of the mouse pointer in global (screen) coordinates.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |