Javascript get mouse coordinates6/5/2023 ![]() ![]() Here’s the picture of elem. If you scroll the page and repeat, you’ll notice that as window-relative button position changes, its window coordinates ( y/top/bottom if you scroll vertically) change as well. left/right – X-coordinate for the left/right rectangle edge.įor instance click this button to see its window coordinates:.top/bottom – Y-coordinate for the top/bottom rectangle edge,.width/height – width/height of the rectangle (can be negative).Īdditionally, there are derived properties:.x/y – X/Y-coordinates of the rectangle origin relative to window,.The method elem.getBoundingClientRect() returns window coordinates for a minimal rectangle that encloses elem as an object of built-in DOMRect class. clientY – window-relative coordinate did change (the arrow became shorter), as the same point became closer to window top.Įlement coordinates: getBoundingClientRect.pageY – document-relative coordinate stayed the same, it’s counted from the document top (now scrolled out).MouseEvent.y Read onlyĪlias for MouseEvent.clientY. MouseEvent.x Read onlyĪlias for MouseEvent.clientX. The amount of pressure applied when clicking. MouseEvent.webkitForce Non-standard Read only This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event). The type of device that generated the event (one of the MOZ_SOURCE_* constants). MouseEvent.mozInputSource Non-standard Read only Instead of using this deprecated (and non-standard) property, you should use PointerEvent and look at its pressure property. The amount of pressure applied to a touch or tablet device when generating the event this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). MouseEvent.mozPressure Non-standard Deprecated Read only To get the current position of the mouse in JavaScript, add a mousemove event listener to the window object and access the clientX and clientY properties of the MouseEvent object in the listener to get the X and Y coordinates of the mouse respectively. Returns true if the shift key was down when the mouse event was fired. ![]() The Y coordinate of the mouse pointer in global (screen) coordinates. The X coordinate of the mouse pointer in global (screen) coordinates. The secondary target for the event, if there is one. The Y coordinate of the mouse pointer relative to the whole document. The X coordinate of the mouse pointer relative to the whole document. The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node. The X coordinate of the mouse pointer relative to the position of the padding edge of the target node. The Y coordinate of the mouse pointer relative to the position of the last mousemove event. The X coordinate of the mouse pointer relative to the position of the last mousemove event. Returns true if the meta key was down when the mouse event was fired. Returns the vertical coordinate of the event relative to the current layer. Returns the horizontal coordinate of the event relative to the current layer. Returns true if the control key was down when the mouse event was fired. The Y coordinate of the mouse pointer in local (DOM content) coordinates. The X coordinate of the mouse pointer in local (DOM content) coordinates. The buttons being pressed (if any) when the mouse event was fired. The button number that was pressed (if applicable) when the mouse event was fired. We start by removing paddings and margins from all the elements. Returns true if the alt key was down when the mouse event was fired.
Move the mouse to get the coordinates
<- Script -> CSS: Next, we move on to styling our div to make it look more presentable.
This interface also inherits properties of its parents, UIEvent and Event. ![]()
0 Comments
Leave a Reply. |