4/29/2023 0 Comments Clientx vs screenx android![]() ![]() relatedTarget the event's related EventTarget. metaKey whether or not meta key was depressed during the Event. ![]() clientX and clientY: Relative to the upper left edge of the content area ( the viewport) of the browser window. shiftKey whether or not shift key was depressed during the Event. while clientX/Y coordinates are relative to the top left corner of the visible part of the page, seen through browser window. 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. You can apply CSS to your Pen from any stylesheet on the web. altKey whether or not alt key was depressed during the Event. ctrlKey whether or not control key was depressed during the Event. cancelable whether or not the event's default action can be prevented. canBubble whether or not the event can bubble. Possible types for mouse events include: click, mousedown, mouseup, mouseover, mousemove, mouseout. Syntax event.initMouseEvent( type, canBubble, cancelable, view,ĭetail, screenX, screenY, clientX, clientY,īutton, relatedTarget) Parameters type the string to set the event's type to. The page on Creating and triggering events gives more information about the way to use these. Instead use specific event constructors, like MouseEvent(). It returns a double floating-point value denoting the coordinate. No change from Document Object Model (DOM) Level 2 Events Specification.ĭocument Object Model (DOM) Level 2 Events SpecificationDo not use this method anymore as it is deprecated. 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 definition of 'MouseEvent.clientX' in that specification. 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. Redefines MouseEvent from long to double.ĭocument Object Model (DOM) Level 3 Events Specification As 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. The definition of 'clientX' in that specification. JavaScript let screenLog = document.querySelector('#screen-log') ĭocument.addEventListener('mousemove', logKey) HTML Move your mouse to see its position. This tutorial explains the differences between the different X and Y coordinate values which exist inside of the mouse events.Code GIST. This example displays your mouse's coordinates whenever you trigger the mousemove event. The differences between clientX and clientY and screenX and screenY: let cX event.clientX let cY event.clientY let sX event.screenX let sY event. See the "Browser compatibility" section for details. Originally, this property was defined as a long integer. Syntax var x = instanceOfMouseEvent.clientXĪ double floating point value, as redefined by the CSSOM View Module. The clientX read-only property of the MouseEvent interface provides the horizontal coordinate within the application's client area at which the event occurred (as opposed to the coordinate within the page).įor example, clicking on the left edge of the client area will always result in a mouse event with a clientX value of 0, regardless of whether the page is scrolled horizontally. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |