![]() IE doesn't provide much in the way of window properties, but oddly enough, a click event object will provide you with the screen location of the click. PageX and clientX, these two are easier to confuse, PageX. You can use the outer/innerWidth and outer/innerHeight properties of the window object to approximate a little closer. 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. Var left = $("#myelement").offset().left + window.screenX Įxact position depends on what toolbars are visible. But for other browsers, a close approximation of position is: var top = $("#myelement").offset().top + window.screenY clientX/Y gives the coordinates relative to the viewport in CSS pixels. If you wish to go through all event pages in order, you should now continue with the Event order /Y are not supported on IE. pageX/Y gives the coordinates relative to the element in CSS pixels.![]() ![]() This is the only question with a true cross-browser answer: use the type property toread out the type: function doSomething(e) Continue Ifirst create cross-browser event access, then I check if the browser supports each individual propertybefore using it. 0:00 / 3:55 clientX vs pageX vs screenX vs offsetX Steve Griffith - Prof3ssorSt3v3 87.4K subscribers Subscribe 713 Share Save 22K views 3 years ago JavaScript in the Browser This tutorial. Please note that in these scripts I’ve been very strict in my object detection. I answered the last question in great detail in a now outdated Evolt article. What was the mouse position during the event?.Which mouse button was pressed during the event?.This includes any portion of the document not currently visible. Which key was pressed during the event? The pageX read-only property of the MouseEvent interface returns the X (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document. So, today, let's take a few page position attributes.The event point is where the user clicked and the reference point is a point in the upper left. Which HTML element is the target of the event? pageX, pageY, screenX, screenY, clientX, and clientY returns a number which indicates the number of logical CSS pixels an event point is from the reference point.I am not going togive an alphabetical list of properties, since it wouldn’t help a bit to make you understandall this - the situation is too confusing.Instead I’ve written five scripts to ask five questions of the browser. JavaScript Event pageX, pageY The Event interface represents any event that occurs in the DOM Some are generated by the user (such as mouse or keyboard events), others are produced by APIs (such as events that show whether an animation is working, videos are paused). See the Event compatibility tables for a quickoverview or the W3C DOM Compatibility - Events page for a completeoverview. The Window.screenX read-only property returns the horizontal distance, in CSS pixels, of the left border of the users browser viewport to the left side of the screen. Thereare very serious browser incompatibilities in this area.Īs soon as we want to read out information about the event, we’re inundated byan immense amount of properties, most of which do not work in most browsers. JavaScript : What is the difference between screenX/Y, clientX/Y and pageX/YTo Access My Live Chat Page, On Google, Search for 'hows tech developer connect'. On this page I give some example scripts for reading out event properties. ![]() The target/srcElement properties are sometimes buggy in Explorer 5 on Macand unreliable in Netscape 4. Generally, the differences are: page x/y: the x or y coordinate as relative the to the fully rendered page (i.e., it considers the entire height and width of the page/document, not just what is currently being shown on screen) screen x/y: the x or y coordinate as relative to the physical screen. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |