some code here (function declaration or element lookup )Įlement_offset_x = element.getBoundingClientRect().left - document.getElementsByTagName("html").getBoundingClientRect().left var element_offset_x // The distance from the left side of the element to the left of the content area I realise I'm a little late, but this works with PURE javascript, and it even gives you the coordinates of the pointer within the element if the element is bigger than the viewport and the user has scrolled. This property takes into account any vertical scrolling of the page.įor further explanation, please see the Mozilla Developer Network: The MouseEvent.pageY read-only property returns the Y (vertical) coordinate in pixels of the event relative to the whole document. This property takes into account any horizontal scrolling of the page. The pageX read-only property returns the X (horizontal) coordinate in pixels of the event relative to the whole document. The HTMLElement.offsetTop read-only property returns the distance of the current element relative to the top of the offsetParent node. Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text. However, for inline-level elements (such as span) that can wrap from one line to the next, offsetTop and offsetLeft describe the positions of the first border box (use Element.getClientRects() to get its width and height), while offsetWidth and offsetHeight describe the dimensions of the bounding border box (use Element.getBoundingClientRect() to get its position). The HTMLElement.offsetLeft read-only property returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node.įor block-level elements, offsetTop, offsetLeft, offsetWidth, and offsetHeight describe the border box of an element relative to the offsetParent. Pos_top = e.pageY - e.currentTarget.offsetTop Pos_left = e.pageX - e.currentTarget.offsetLeft Prefer using Vue.js? I do! Then your HTML would look like this: Hold mouse down or touch to change color.ĭrag to turn on coordinates relative to top left of page. Move over box for coordinates relative to top left of box. User-select: none /* Disable text selection */ but obviously you could do something different if needed. Yes, I'm being lazy and doing the same as mouseout here 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. 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.
0 Comments
Leave a Reply. |