Find mouse position relative to element

Question

I want to make a little painting app using canvas  So I need to find the mouse s position on the canvas

User · Answer

Taken from this tutorial  with corrections made thanks to the top comment   function getMousePos  canvas  evt         var rect   canvas getBoundingClientRect        return           x  Math floor    evt clientX - rect left       rect right - rect left     canvas width            y  Math floor    evt clientY - rect top       rect bottom - rect top     canvas height              Use on a canvas as follows   var canvas   document getElementById   myCanvas     canvas addEventListener   mousemove   function  evt         var mousePos   getMousePos  canvas  evt

User · Answer

There is no answer in pure javascript that returns relative coordinates when the reference element is nested inside others which can be with absolute positioning  Here is a solution to this scenario    function getRelativeCoordinates  event  referenceElement       const position         x  event pageX      y  event pageY         const offset         left  referenceElement offsetLeft      top  referenceElement offsetTop         let reference   referenceElement offsetParent     while reference       offset left    reference offsetLeft      offset top    reference offsetTop      reference   reference offsetParent         return        x  position x - offset left      y  position y - offset top

User · Answer

As I didn t find a jQuery-free answer that I could copy paste  here s the solution I used   x000D   x000D  document getElementById  clickme   onclick   function clickEvent e             e   Mouse click event        var rect   e target getBoundingClientRect          var x   e clientX - rect left    x position within the element        var y   e clientY - rect top     y position within the element        console log  Left        x       Top        y               x000D   clickme     margin-top  20px    margin-left  100px    border  1px solid black    cursor  pointer    x000D   lt div id  clickme  gt Click Me - lt br gt   this box has margin-left  100px  margin-top  20px   lt  div gt  x000D   x000D   x000D   JSFiddle of full example

User · Answer

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     var element offset x      The distance from the left side of the element to the left of the content area          some code here  function declaration or element lookup      element offset x   element getBoundingClientRect   left  -  document getElementsByTagName  html   0  getBoundingClientRect   left            code here      function mouseMoveEvent event        var pointer location    event clientX   window pageXOffset  - element offset x           How it works    The first thing we do is get the location of the HTML element  the content area  relative to the current viewport  If the page has scrollbars and is scrolled  then the number returned by getBoundingClientRect   left for the html tag will be negative  We then use this number to compute the distance between the element and the left of the content area  With element offset x   element getBoundingClientRect   left          Knowing the distance of the element from the content area  event clientX gives us the distance of the pointer from the viewport  It is important to understand that the viewport and the content area are two different entities  the viewport can move if the page is scrolled  Hence  clientX will return the SAME number even if the page is scrolled    To compensate for this   we need to add the x position of the pointer  relative to the viewport    to the x position of the viewport  relative to the content area    The X position of the viewport is found with  window pageXOffset

User · Answer

canvas onmousedown   function e        pos left   e pageX - e currentTarget offsetLeft      pos top   e pageY - e currentTarget offsetTop      console log pos left  pos top      HTMLElement offsetLeft  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   For block-level elements  offsetTop  offsetLeft  offsetWidth  and offsetHeight describe the border box of an element relative to the offsetParent   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   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   HTMLElement offsetTop  The HTMLElement offsetTop read-only property returns the distance of the current element relative to the top of the offsetParent node   MouseEvent pageX  The pageX read-only property returns the X  horizontal  coordinate in pixels of the event relative to the whole document  This property takes into account any horizontal scrolling of the page   MouseEvent pageY  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 vertical scrolling of the page   For further explanation  please see the Mozilla Developer Network   https   developer mozilla org en-US docs Web API MouseEvent pageX https   developer mozilla org en-US docs Web API MouseEvent pageY https   developer mozilla org en-US docs Web API HTMLElement offsetLeft https   developer mozilla org en-US docs Web API HTMLElement offsetTop

User · Answer

You have to know the structure of your page  because if your canvas is a child of a div which in turn is a child of another div    then the story gets more complicated  Here s my code for a canvas which is inside 2 levels of div s   canvas addEventListener  click   function event    var x   event pageX -  this offsetLeft   this parentElement offsetLeft   var y   event pageY -  this offsetTop   this parentElement offsetTop   console log  relative x     x   relative y    y

User · Answer

Here is what I got           some-class   click function e         var posx   0      var posy   0       posx   e pageX      posy   e pageY       alert posx       alert posy

User · Answer

A good write up of the difficulty of this problem can be found here  http   www quirksmode org js events properties html position  Using the technique that is described there you can find the mouses position in the document  Then you just check to see if it is inside the bounding box of your element  which you can find by calling element getBoundingClientRect   which will return an object with the following properties    bottom  height  left  right  top  width    From there it is trivial to figure out if the even happened inside your element or not

User · Answer

The mouse coordinates inside a canvas can be obtained thanks to event offsetX and event offsetY  Here s a little snippet to prove my point    x000D   x000D  c document getElementById  c    x000D  ctx c getContext  2d    x000D  ctx fillStyle  black   x000D  ctx fillRect 0 0 100 100   x000D  c addEventListener  mousemove  function mouseEvt   x000D       the mouse s coordinates on the canvas are just below x000D    x mouseEvt offsetX  x000D    y mouseEvt offsetY  x000D       the following lines draw a red square around the mouse to prove it x000D    ctx fillStyle  black   x000D    ctx fillRect 0 0 100 100   x000D    ctx fillStyle  red   x000D    ctx fillRect x-5 y-5 10 10   x000D      x000D     x000D  body   x000D    background-color  blue  x000D    x000D   x000D  canvas   x000D    position  absolute  x000D    top  50px  x000D    left  100px  x000D    x000D   lt canvas id  c  width  100  height  100  gt  lt  canvas gt  x000D       x000D   x000D   x000D

User · Answer

Original answer said to put it in an iframe  The better solution is to use the events offsetX and offsetY on a canvas that has the padding set to 0px    lt html gt   lt body gt   lt script gt   var main document createElement  canvas    main width  200   main height  300   main style  padding 0px margin 30px border thick dashed red   document body appendChild main       adding event listener  main addEventListener  mousemove  function e       var ctx e target getContext  2d        var c Math floor Math random   0xFFFFFF       c c toString 16   for  c length lt 6   c  0  c      ctx strokeStyle     c      ctx beginPath        ctx arc e offsetX e offsetY 3 0 2 Math PI       ctx stroke        e target title e offsetX     e offsetY              it worked  move mouse over window   lt  script gt   lt  body gt   lt  html gt

User · Answer

I had to get the cursor position inside a very wide div with scrollbar  The objective was to drag elements to any position of the div  To get the mouse position on a far away position deep in the scrolling      canvas   on  mousemove   function e         dragElement  parent   css  top   e currentTarget scrollTop   e originalEvent clientY          dragElement  parent   css  left   e currentTarget scrollLeft   e originalEvent clientX

User · Answer

you can get it by  var element   document getElementById canvasId   element onmousemove   function e        var xCoor   e clientX      var yCoor   e clientY

User · Answer

The following calculates the mouse position relation to the canvas element   var example   document getElementById  example     example onmousemove   function e         var x   e pageX - this offsetLeft       var y   e pageY - this offsetTop       In this example  this refers to the example element  and e is the onmousemove event

User · Answer

For those of you developing regular websites or PWAs  Progressive Web Apps  for mobile devices and or laptops monitors with touch screens  then you have landed here because you might be used to mouse events and are new to the sometimes painful experience of Touch events    yay   There are just 3 rules    Do as little as possible during mousemove or touchmove events  Do as much as possible during mousedown or touchstart events  Cancel propagation and prevent defaults for touch events to prevent mouse events from also firing on hybrid devices    Needless to say  things are more complicated with touch events because there can be more than one and they re more flexible  complicated  than mouse events   I m only going to cover a single touch here   Yes  I m being lazy  but it s the most common type of touch  so there    x000D   x000D  var posTop  x000D  var posLeft  x000D  function handleMouseDown evt    x000D    var e   evt    window event     Because Firefox  etc  x000D    posTop   e target offsetTop  x000D    posLeft   e target offsetLeft  x000D    e target style background    red   x000D       The statement above would be better handled by CSS x000D       but it s just an example of a generic visible indicator  x000D    x000D  function handleMouseMove evt    x000D    var e   evt    window event  x000D    var x   e offsetX     Wonderfully x000D    var y   e offsetY     Simple  x000D    e target innerHTML    Mouse      x          y  x000D    if  posTop  x000D      e target innerHTML      lt br gt      x   posLeft            y   posTop   x000D    x000D  function handleMouseOut evt    x000D    var e   evt    window event  x000D    e target innerHTML       x000D    x000D  function handleMouseUp evt    x000D    var e   evt    window event  x000D    e target style background    yellow   x000D    x000D  function handleTouchStart evt    x000D    var e   evt    window event  x000D    var rect   e target getBoundingClientRect    x000D    posTop   rect top  x000D    posLeft   rect left  x000D    e target style background    green   x000D    e preventDefault       Unnecessary if using Vue js x000D    e stopPropagation       Same deal here x000D    x000D  function handleTouchMove evt    x000D    var e   evt    window event  x000D    var pageX   e touches 0  clientX     Touches are page-relative x000D    var pageY   e touches 0  clientY     not target-relative x000D    var x   pageX - posLeft  x000D    var y   pageY - posTop  x000D    e target innerHTML    Touch      x          y  x000D    e target innerHTML      lt br gt     pageX          pageY  x000D    e preventDefault    x000D    e stopPropagation    x000D    x000D  function handleTouchEnd evt    x000D    var e   evt    window event  x000D    e target style background    yellow   x000D       Yes  I m being lazy and doing the same as mouseout here x000D       but obviously you could do something different if needed  x000D    e preventDefault    x000D    e stopPropagation    x000D    x000D  div   x000D    background  yellow  x000D    height  100px  x000D    left  50px  x000D    position  absolute  x000D    top  80px  x000D    user-select  none     Disable text selection    x000D    -ms-user-select  none  x000D    width  100px  x000D    x000D   lt div  x000D    onmousedown  handleMouseDown     x000D    onmousemove  handleMouseMove    x000D    onmouseout  handleMouseOut    x000D    onmouseup  handleMouseUp     x000D    ontouchstart  handleTouchStart     x000D    ontouchmove  handleTouchMove     x000D    ontouchend  handleTouchEnd    gt  x000D   lt  div gt  x000D  Move over box for coordinates relative to top left of box  lt br gt  x000D  Hold mouse down or touch to change color  lt br gt  x000D  Drag to turn on coordinates relative to top left of page  x000D   x000D   x000D    Prefer using Vue js   I do   Then your HTML would look like this    lt div  mousedown  handleMouseDown        mousemove  handleMouseMove        mouseup  handleMouseUp        touchstart stop prevent  handleTouchStart        touchmove stop prevent  handleTouchMove        touchend stop prevent  handleTouchEnd  gt

User · Answer

I implemented an other solution that I think is very simple so I thought I d share with you guys   So  the problem for me was that the dragged div would jump to 0 0 for the mouse cursor  So I needed to capture the mouses position on the div to adjust the divs new position    I read the divs PageX and PageY and set the top and left of the according to that and then to get the values to adjust the coordinates to keep the cursor in the initial position in the div I use a onDragStart listener and store the e nativeEvent layerX and e nativeEvent layerY that only in the initial trigger gives you the mouses position within the draggable div    Example code      onDrag   e    gt              let newCoords            newCoords     x  e pageX - this state correctionX  y  e pageY - this state correctionY              this props onDrag newCoords  e  item id                      onDragStart              e    gt                this setState                 correctionX  e nativeEvent layerX                correctionY  e nativeEvent layerY                                I hope this will help someone that went through the same problems I went through

User · Answer

I tried all these solutions and due to my special setup with a matrix transformed container  panzoom library  none worked  This returns the correct value  even if zoomed and paned   mouseevent e     const x   e offsetX         y   e offsetY     But only if there are no child elements in the way  This can be circumvented by making them  invisible  to the event  using CSS    child      pointer-events  none

User · Answer

const findMousePositionRelativeToElement    e    gt        const xClick   e clientX - e currentTarget offsetLeft      const yClick   e clientY - e currentTarget offsetTop      console log  x    xClick         console log  y    yClick             or     const rect   e currentTarget getBoundingClientRect        const xClick2   e clientX - rect left      const yClick2   e clientY - rect top      console log  x2    xClick2         console log  y2    yClick2

User · Answer

You can simply use jQuery   s event pageX and event pageY with the method offset   of jQuery to get the position of the mouse relative to an element      document  ready function            quot  myDiv quot   mousemove function event                     var X   event pageX -   this  offset   left        var Y   event pageY -   this  offset   top           quot  cordn quot   text  quot   quot    X    quot   quot    Y    quot   quot                   You can see an example here  How to find mouse position relative to element

User · Answer

Based on  Spider s solution  my non JQuery version is this      Get the container element s bounding box var sides   document getElementById  container   getBoundingClientRect        Apply the mouse event listener document getElementById  canvas   onmousemove    e    gt         Here  self  is simply the current window s context   var x    e clientX - sides left    self pageXOffset    var y    e clientY - sides top    self pageYOffset      This works both with scrolling and zooming  in which case sometimes it returns floats

User · Answer

None of the above answers are satisfactory IMO  so here s what I use      Cross-browser AddEventListener function ael e  n  h       if  e addEventListener            e addEventListener n  h  true        else          e attachEvent  on  n  h            var touch    ontouchstart  in document documentElement     true if touch device var mx  my     always has current mouse position IN WINDOW  if touch       ael document   touchmove   function e  var ori e mx ori changedTouches 0  pageX my ori changedTouches 0  pageY      else      ael document   mousemove   function e  mx e clientX my e clientY           local mouse X Y position in element function showLocalPos e       document title    mx - e getBoundingClientRect   left             x            Math round my - e getBoundingClientRect   top       And if you ever need to know the current Y scrolling position of page    var yscroll   window pageYOffset             document documentElement  amp  amp  document documentElement scrollTop             document body scrollTop     scroll Y position in page

User · Answer

You can use getBoudingClientRect   of the relative parent  document addEventListener  quot mousemove quot    e    gt      let xCoord   e clientX - e target getBoundingClientRect   left   e offsetX   let yCoord   e clientY - e target getBoundingClientRect   top   e offsetY   console log  quot xCoord quot   xCoord   quot yCoord quot   yCoord

User · Answer

function myFunction e        var x    e clientX - e currentTarget offsetLeft        var y   e clientY - e currentTarget offsetTop       this works ok

User · Answer

For people using JQuery  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  Here  you can specify which parent  You take the mouse position  and then subtract it from the parent element s offset position  var x   evt pageX -     element   offset   left  var y   evt pageY -     element   offset   top   If you re trying to get the mouse position on a page inside a scrolling pane  var x    evt pageX -     element   offset   left    self frame scrollLeft    var y    evt pageY -     element   offset   top    self frame scrollTop     Or the position relative to the page  var x    evt pageX -     element   offset   left      window  scrollLeft    var y    evt pageY -     element   offset   top      window  scrollTop     Note the following performance optimisation  var offset       element   offset       Then refer to  var x   evt pageX - offset left   In this way  JQuery does not have to look up  element for each line  Update There is a newer  JavaScript-only version in an answer by  anytimecoder -- see also browser support for getBoundingClientRect

User · Answer

I came across this question  but in order to make it work for my case  using dragover on a DOM-element  not being canvas in my case    I found that you only have have to use offsetX and offsetY on the dragover-mouse event   onDragOver event    var x   event offsetX   var y   event offsetY

User · Answer

Based on  Patrick Boos solution but fixing potential problem with intermediate scrollbars  export function getRelativeCoordinates event  MouseEvent  referenceElement  HTMLElement      const position         x  event pageX      y  event pageY          const offset         left  referenceElement offsetLeft      top  referenceElement offsetTop          let reference   referenceElement offsetParent as HTMLElement     while  reference        offset left    reference offsetLeft      offset top    reference offsetTop      reference   reference offsetParent as HTMLElement         const scrolls         left  0      top  0          reference   event target as HTMLElement    while  reference        scrolls left    reference scrollLeft      scrolls top    reference scrollTop      reference   reference parentElement as HTMLElement         return       x  position x   scrolls left - offset left      y  position y   scrolls top - offset top

User · Answer

I  1  Mark van Wyk s answer as it got me in the right direction  but didn t quite solve it for me  I still had an offset on painting in elements contained within another element   FOllowing solved it for me           x   e pageX - this offsetLeft -   elem  offset   left          y   e pageY - this offsetTop -   elem  offset   top    In other words - i simply stacked all the offsets from all elements nested

[javascript] Find mouse position relative to element

Examples related to javascript