Javascript - Track mouse position

Question

I am hoping to track the position of the mouse cursor  periodically every t mseconds  So essentially  when a page loads - this tracker should start and for  say  every 100 ms  I should get the new value of posX and posY and print it out in the form    I tried the following code - but the values do not get refreshed - only the initial values of posX and posY show up in the form boxes  Any ideas on how I can get this up and running      lt html gt   lt head gt   lt title gt  Track Mouse  lt  title gt   lt script type  text javascript  gt  function mouse position         var e   window event       var posX   e clientX      var posY   e clientY       document Form1 posx value   posX      document Form1 posy value   posY       var t   setTimeout mouse position 100       lt  script gt    lt  head gt    lt body onload  mouse position    gt   lt form name  Form1  gt  POSX   lt input type  text  name  posx  gt  lt br gt  POSY   lt input type  text  name  posy  gt  lt br gt   lt  form gt   lt  body gt   lt  html gt

User · Answer

I don t have enough reputation to post a comment reply  but took TJ Crowder s excellent answer and fully defined the code on a 100ms timer   He left some details to the imagination     Thanks OP for the question  and TJ for the answer  You re both a great help  Code is embedded below as a mirror of isbin    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D     lt meta charset  utf-8  gt  x000D     lt title gt Example lt  title gt  x000D     lt style gt  x000D      body   x000D        height  3000px  x000D        x000D       dot   x000D        width  2px  x000D        height  2px  x000D        background-color  black  x000D        position  absolute  x000D        x000D     lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt script gt  x000D   function     x000D       use strict   x000D      var mousePos  x000D   x000D      document onmousemove   handleMouseMove  x000D      setInterval getMousePosition  100      setInterval repeats every X ms x000D   x000D      function handleMouseMove event    x000D          var eventDoc  doc  body  x000D   x000D          event   event    window event     IE-ism x000D   x000D             If pageX Y aren t available and clientX Y are  x000D             calculate pageX Y - logic taken from jQuery  x000D              This is to support old IE  x000D          if  event pageX    null  amp  amp  event clientX    null    x000D              eventDoc    event target  amp  amp  event target ownerDocument     document  x000D              doc   eventDoc documentElement  x000D              body   eventDoc body  x000D   x000D              event pageX   event clientX   x000D                 doc  amp  amp  doc scrollLeft    body  amp  amp  body scrollLeft    0  - x000D                 doc  amp  amp  doc clientLeft    body  amp  amp  body clientLeft    0   x000D              event pageY   event clientY   x000D                 doc  amp  amp  doc scrollTop     body  amp  amp  body scrollTop     0  - x000D                 doc  amp  amp  doc clientTop     body  amp  amp  body clientTop     0    x000D            x000D   x000D          mousePos     x000D              x  event pageX  x000D              y  event pageY x000D             x000D        x000D      function getMousePosition     x000D          var pos   mousePos  x000D     x000D          if   pos    x000D                 We haven t seen any movement yet  so don t add a duplicate dot  x000D            x000D          else   x000D                 Use pos x and pos y x000D                 Add a dot to follow the cursor x000D              var dot  x000D              dot   document createElement  div    x000D              dot className    dot   x000D              dot style left   pos x    px   x000D              dot style top   pos y    px   x000D              document body appendChild dot   x000D            x000D        x000D        x000D   lt  script gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

onmousemove   function e  console log  mouse location    e clientX  e clientY     Open your console  Ctrl Shift J   copy-paste the code above and move your mouse on browser window

User · Answer

Just a simplified version of  T J  Crowder and  RegarBoy s answers   Less is more in my opinion   Check out onmousemove event for more info about the event     There s a new value of posX and posY every time the mouse moves according to the horizontal and vertical coordinates    lt  DOCTYPE html gt       lt html gt       lt head gt         lt meta charset  utf-8  gt         lt title gt Example Mouse Tracker lt  title gt         lt style gt              body  height  3000px            dot  width  2px height  2px background-color  black position  absolute          lt  style gt       lt  head gt       lt body gt       lt p gt Mouse tracker lt  p gt       lt script gt      onmousemove   function e             Logging purposes         console log  mouse location    e clientX  e clientY              meat and potatoes of the snippet         var pos   e          var dot          dot   document createElement  div            dot className    dot           dot style left   pos x    px           dot style top   pos y    px           document body appendChild dot                    lt  script gt       lt  body gt       lt  html gt

User · Answer

If just want to track the mouse movement visually    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt title gt  lt  title gt  x000D   lt  head gt  x000D   lt style type  text css  gt  x000D      margin  0  padding  0    x000D  html  body   width  100   height  100   overflow  hidden    x000D   lt  style gt  x000D   lt body gt  x000D   lt canvas gt  lt  canvas gt  x000D   x000D   lt script type  text javascript  gt  x000D  var x000D  canvas      document querySelector  canvas    x000D  ctx         canvas getContext  2d    x000D  beginPath   false  x000D   x000D  canvas width    window innerWidth  x000D  canvas height   window innerHeight  x000D   x000D  document body addEventListener  mousemove   function  event    x000D   var x   event clientX  y   event clientY  x000D   x000D   if  beginPath    x000D    ctx lineTo x  y   x000D    ctx stroke    x000D     else   x000D    ctx beginPath    x000D    ctx moveTo x  y   x000D    beginPath   true  x000D     x000D     false   x000D   lt  script gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

What I think that he only wants to know the X Y positions of cursor than why answer is that complicated    x000D   x000D     Getting  Info  div in js hands x000D  var info   document getElementById  info    x000D   x000D     Creating function that will tell the position of cursor x000D     PageX and PageY will getting position values and show them in P x000D  function tellPos p   x000D    info innerHTML    Position X       p pageX     lt br   gt Position Y       p pageY  x000D    x000D  addEventListener  mousemove   tellPos  false   x000D      x000D    padding  0  x000D    margin  0  x000D      transition  0 2s all ease    x000D      x000D   info   x000D    position  absolute  x000D    top  10px  x000D    right  10px  x000D    background-color  black  x000D    color  white  x000D    padding  25px 50px  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D     x000D     lt body gt  x000D       lt div id  info  gt  lt  div gt  x000D           lt  body gt  x000D     lt  html gt  x000D   x000D   x000D

User · Answer

Here is the simplest way to track your mouse position Html  lt body id  quot mouse-position quot   gt  lt  body gt   js document querySelector   mouse-position   addEventListener  mousemove    e    gt            console log  quot mouse move X   quot   e clientX           console log  quot mouse move X   quot   e screenX                know more

User · Answer

Here s a solution  based on jQuery and a mouse event listener  which is far better than a regular polling  on the body      body   mousemove function e        document Form1 posx value   e pageX      document Form1 posy value   e pageY

User · Answer

Irrespective of the browser  below lines worked for me to fetch correct mouse position   event clientX - event currentTarget getBoundingClientRect   left  event clientY - event currentTarget getBoundingClientRect   top

User · Answer

I believe that we are overthinking this    x000D   x000D  function mouse position e  x000D    x000D    do stuff x000D    x000D   lt body onmousemove  mouse position event   gt  lt  body gt  x000D   x000D   x000D

User · Answer

We recently had to find the current x y position to enumerate elements over which the cursor is hovering independent of z-index  We ended up just attaching a mousemove event listener to document e g    x000D   x000D  function findElements e      var els   document elementsFromPoint e clientX  e clientY         do cool stuff with els   console log els      return     document addEventListener  mousemove   findElements   x000D   x000D   x000D

User · Answer

Here   s a combination of the two requirements  track the mouse position  every 100 milliseconds   var period   100      tracking   window addEventListener  mousemove   function e        if   tracking            return             console log  mouse location    e clientX  e clientY      schedule         schedule     function schedule         tracking   false       setTimeout function             tracking   true         period       This tracks  amp  acts on the mouse position  but only every period milliseconds

User · Answer

ES6 based code   let handleMousemove    event    gt      console log  mouse position    event x    event y         document addEventListener  mousemove   handleMousemove     If you need throttling for mousemoving  use this   let handleMousemove    event    gt      console warn    event x    event y  n        let throttle    func  delay    gt      let prev   Date now   - delay    return     args    gt        let current   Date now        if  current - prev  gt   delay          prev   current        func apply null  args                    let s handle mousemoving every 500ms only document addEventListener  mousemove   throttle handleMousemove  500      here is example

User · Answer

The mouse s position is reported on the event object received by a handler for the mousemove event  which you can attach to the window  the event bubbles     function         document onmousemove   handleMouseMove      function handleMouseMove event            var eventDoc  doc  body           event   event    window event     IE-ism             If pageX Y aren t available and clientX Y are             calculate pageX Y - logic taken from jQuery              This is to support old IE          if  event pageX    null  amp  amp  event clientX    null                eventDoc    event target  amp  amp  event target ownerDocument     document              doc   eventDoc documentElement              body   eventDoc body               event pageX   event clientX                  doc  amp  amp  doc scrollLeft    body  amp  amp  body scrollLeft    0  -                doc  amp  amp  doc clientLeft    body  amp  amp  body clientLeft    0               event pageY   event clientY                  doc  amp  amp  doc scrollTop     body  amp  amp  body scrollTop     0  -                doc  amp  amp  doc clientTop     body  amp  amp  body clientTop     0                          Use event pageX   event pageY here                Note that the body of that if will only run on old IE    Example of the above in action - it draws dots as you drag your mouse over the page   Tested on IE8  IE11  Firefox 30  Chrome 38    If you really need a timer-based solution  you combine this with some state variables    function         var mousePos       document onmousemove   handleMouseMove      setInterval getMousePosition  100      setInterval repeats every X ms      function handleMouseMove event            var dot  eventDoc  doc  body  pageX  pageY           event   event    window event     IE-ism             If pageX Y aren t available and clientX Y are             calculate pageX Y - logic taken from jQuery              This is to support old IE          if  event pageX    null  amp  amp  event clientX    null                eventDoc    event target  amp  amp  event target ownerDocument     document              doc   eventDoc documentElement              body   eventDoc body               event pageX   event clientX                  doc  amp  amp  doc scrollLeft    body  amp  amp  body scrollLeft    0  -                doc  amp  amp  doc clientLeft    body  amp  amp  body clientLeft    0               event pageY   event clientY                  doc  amp  amp  doc scrollTop     body  amp  amp  body scrollTop     0  -                doc  amp  amp  doc clientTop     body  amp  amp  body clientTop     0                       mousePos                 x  event pageX              y  event pageY                      function getMousePosition             var pos   mousePos          if   pos                   We haven t seen any movement yet                   else                  Use pos x and pos y                         As far as I m aware  you can t get the mouse position without having seen an event  something which this answer to another Stack Overflow question seems to confirm   Side note  If you re going to do something every 100ms  10 times second   try to keep the actual processing you do in that function very  very limited  That s a lot of work for the browser  particularly older Microsoft ones  Yes  on modern computers it doesn t seem like much  but there is a lot going on in browsers    So for example  you might keep track of the last position you processed and bail from the handler immediately if the position hasn t changed

[javascript] Javascript - Track mouse position

Examples related to javascript