![]() Var pageY = e.touches.clientY // not target-relativeĮ.target.innerHTML = "Touch: " + x + ", " + y Į.target.innerHTML += "" + pageX + ", " + pageY Var pageX = e.touches.clientX // Touches are page-relative Var rect = e.target.getBoundingClientRect() Į.preventDefault() // Unnecessary if using Vue.js but it's just an example of a generic visible indicator.Į.target.innerHTML = "Mouse: " + x + ", " + y Į.target.innerHTML += "" + (x + posLeft) + ", " + (y + posTop) The statement above would be better handled by CSS Var e = evt || window.event // Because Firefox, etc. There is a newer, JavaScript-only version in an answer by - see also browser support for getBoundingClientRect(). In this way, JQuery does not have to look up #element for each line. Note the following performance optimisation: var offset = $('#element').offset() Var y = (evt.pageY - $('#element').offset().top) + $(window).scrollTop() Or the position relative to the page: var x = (evt.pageX - $('#element').offset().left) + $(window).scrollLeft() If you're trying to get the mouse position on a page inside a scrolling pane: var x = (evt.pageX - $('#element').offset().left) + () Var y = evt.pageY - $('#element').offset().top var x = evt.pageX - $('#element').offset().left You take the mouse position, and then subtract it from the parent element's offset position. MouseEvent.Sometimes, when you have nested elements, one of them with the event attached to it, it can be confusing to understand what your browser sees as the parent. 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 ![]() 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. Returns true if the alt key was down when the mouse event was fired. This interface also inherits properties of its parents, UIEvent and Event.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |