How to get the mouse position without events without moving the mouse

Question

Is it possible to get the mouse position with JavaScript after page loads without any mouse movement event  without moving the mouse

User · Answer

I think i may have a reasonable solution with out counting divs and pixels..lol

Simply use animation frame or a time interval of a function. you will still need a mouse event one time though just to initiate, but technically you position this where ever you like.

Essentially we are tracking a dummy div at all times with out mouse movement.

// create a div(#mydiv) 1px by 1px set opacity to 0 & position:absolute;

Below is the logic..

var x,y;


$('body').mousemove(function( e ) {

    var x = e.clientX - (window.innerWidth / 2);
    var y = e.clientY - (window.innerHeight / 2);
 }


function looping (){

   /* track my div position 60 x 60 seconds!
      with out the mouse after initiation you can still track the dummy div.x & y
      mouse doesn't need to move.*/

   $('#mydiv').x = x;    // css transform x and y to follow 
   $('#mydiv)'.y = y;

   console.log(#mydiv.x etc)

   requestAnimationFrame( looping , frame speed here);
}

User · Answer

You do not have to move the mouse to get the cursor s location  The location is also reported on events other than mousemove  Here s a click-event as an example   document body addEventListener  click  function e        console log  cursor-location      e clientX         e clientY

User · Answer

Riffing on  SuperNova s answer  here s an approach using ES6 classes that keeps the context for this correct in your callback    x000D   x000D  class Mouse   x000D    constructor     x000D      this x   0  x000D      this y   0  x000D      this callbacks     x000D        mouseenter      x000D        mousemove      x000D         x000D      x000D   x000D    get xPos     x000D      return this x  x000D      x000D   x000D    get yPos     x000D      return this y  x000D      x000D   x000D    get position     x000D      return    this x    this y    x000D      x000D   x000D    addListener type  callback    x000D      document addEventListener type  this      Pass  this  as the second arg to keep the context correct x000D      this callbacks type  push callback   x000D      x000D   x000D        handleEvent  is part of the browser s  EventListener  API  x000D       https   developer mozilla org en-US docs Web API EventListener handleEvent x000D    handleEvent event    x000D      const isMousemove   event type      mousemove   x000D      const isMouseenter   event type      mouseenter   x000D   x000D      if  isMousemove    isMouseenter    x000D        this x   event pageX  x000D        this y   event pageY  x000D        x000D   x000D      this callbacks event type  forEach  callback    gt    x000D        callback    x000D          x000D      x000D    x000D   x000D  const mouse   new Mouse    x000D   x000D  mouse addListener  mouseenter        gt  console log  mouseenter   mouse position    x000D  mouse addListener  mousemove        gt  console log  mousemove A   mouse position    x000D  mouse addListener  mousemove        gt  console log  mousemove B   mouse position    x000D   x000D   x000D

User · Answer

What you can do is create variables for the x and y coordinates of your cursor  update them whenever the mouse moves and call a function on an interval to do what you need with the stored position  The downside to this of course is that at least one initial movement of the mouse is required to have it work  As long as the cursor updates its position at least once  we are able to find its position regardless of whether it moves again  var cursor x   -1  var cursor y   -1  document onmousemove   function event     cursor x   event pageX   cursor y   event pageY    setInterval check cursor  1000   function check cursor   console log  Cursor at    cursor x      cursor y     The preceding code updates once a second with a message of where your cursor is  I hope this helps

User · Answer

I envision that maybe you have a parent page with a timer and after a certain amount of time or a task is completed  you forward the user to a new page  Now you want the cursor position  and because they are waiting  they aren t necessarily touching the mouse   So track the mouse on the parent page using standard events and pass the last value to the new page in a get or a post variable   You can use JHarding s code on your parent page so that the latest position is always available in a global variable   var cursorX  var cursorY  document onmousemove   function e       cursorX   e pageX      cursorY   e pageY      This won t help users that navigate to this page by means other than your parent page

User · Answer

Here s my solution  It exports window currentMouseX and window currentMouseY properties you can use anywhere  It uses the position of a hovered element  if any  initially and afterwards listens to mouse movements to set the correct values    function          window currentMouseX   0      window currentMouseY   0          Guess the initial mouse position approximately if possible      var hoveredElement   document querySelectorAll   hover        hoveredElement   hoveredElement hoveredElement length - 1      Get the most specific hovered element      if  hoveredElement    null            var rect   hoveredElement getBoundingClientRect               Set the values from hovered element s position         window currentMouseX   window scrollX   rect x          window currentMouseY   window scrollY   rect y                Listen for mouse movements to set the correct values     document addEventListener  mousemove   function  e            window currentMouseX   e pageX          window currentMouseY   e pageY                 Composr CMS Source  https   github com ocproducts composr commit a851c19f925be20bc16bfe016be42924989f262e diff-b162dc9c35a97618a96748639ff41251R1202

User · Answer

I implemented a horizontal vertical search   first make a div full of vertical line links arranged horizontally  then make a div full of horizontal line links arranged vertically  and simply see which one has the hover state  like Tim Down s idea above  and it works pretty fast  Sadly  does not work on Chrome 32 on KDE   jsfiddle net 5XzeE 4

User · Answer

Not mouse position  but  if you re looking for current cursor postion  for use cases like getting last typed character etc  then  below snippet works fine  This will give you the cursor index related to text content  window getSelection   getRangeAt 0  startOffset

User · Answer

Real answer  No  it s not possible   OK  I have just thought of a way  Overlay your page with a div that covers the whole document  Inside that  create  say  2 000 x 2 000  lt a gt  elements  so that the  hover pseudo-class will work in IE 6  see   each 1 pixel in size  Create a CSS  hover rule for those  lt a gt  elements that changes a property  let s say font-family   In your load handler  cycle through each of the 4 million  lt a gt  elements  checking currentStyle   getComputedStyle   until you find the one with the hover font  Extrapolate back from this element to get the co-ordinates within the document   N B  DON T DO THIS

User · Answer

Tim Down s answer is not performant if you render 2 000 x 2 000  lt a gt  elements      OK  I have just thought of a way  Overlay your page with a div that   covers the whole document  Inside that  create  say  2 000 x 2 000    elements  so that the  hover pseudo-class will work in IE 6  see     each 1 pixel in size  Create a CSS  hover rule for those  elements   that changes a property  let s say font-family   In your load handler    cycle through each of the 4 million  elements  checking   currentStyle   getComputedStyle   until you find the one with the   hover font  Extrapolate back from this element to get the co-ordinates   within the document       N B  DON T DO THIS    But you don t have to render 4 million elements at once  instead use binary search  Just use 4  lt a gt  elements instead    Step 1  Consider the whole screen as the starting search area Step 2  Split the search area into 2 x 2   4 rectangle   lt a gt  elements Step 3  Using the getComputedStyle   function determine in which rectangle mouse hovers Step 4  Reduce the search area to that rectangle and repeat from step 2    This way you would need to repeat these steps max 11 times  considering your screen is not wider than 2048px   So you will generate max 11 x 4   44  lt a gt  elements   If you don t need to determine the mouse position exactly to a pixel  but say 10px precision is OK  You would repeat the steps at most 8 times  so you would need to draw max 8 x 4   32  lt a gt  elements   Also generating and then destroying the  lt a gt  elements is not performat as DOM is generally slow  Instead  you can just reuse the initial 4  lt a gt  elements and just adjust their top  left  width and height as you loop through steps   Now  creating 4  lt a gt  is an overkill as well  Instead  you can reuse the same one  lt a gt  element for when testing for getComputedStyle   in each rectangle  So  instead of splitting the search area into 2 x 2  lt a gt  elements just reuse a single  lt a gt  element by moving it with top and left style properties   So  all you need is a single  lt a gt  element change its width and height max 11 times  and change its top and left max 44 times and you will have the exact mouse position

User · Answer

The most simple solution but not 100  accurate      hover   last   offset     Result   top  148  left  62 5  The result depend on the nearest element size and return undefined when user switched the tab

User · Answer

You could try something similar to what Tim Down suggested - but instead of having elements for each pixel on the screen  create just 2-4 elements  boxes   and change their location  width  height dynamically to divide the yet possible locations on screen by 2-4 recursively  thus finding the mouse real location quickly   For example - first elements take right and left half of screen  afterwards the upper and lower half  By now we already know in which quarter of screen the mouse is located  are able to repeat - discover which quarter of this space

User · Answer

var x   0  var y   0   document addEventListener  mousemove   onMouseMove  false   function onMouseMove e       x   e clientX      y   e clientY     function getMouseX         return x     function getMouseY         return y

User · Answer

Edit 2020  This does not work any more  It seems so  that the browser vendors patched this out  Because the most browsers rely on chromium  it might be in its core   Old answer  You can also hook mouseenter  this event is fired after page reload  when the mousecursor is inside the page   Extending Corrupted s code should do the trick    x000D   x000D  var x   null  x000D  var y   null  x000D       x000D  document addEventListener  mousemove   onMouseUpdate  false   x000D  document addEventListener  mouseenter   onMouseUpdate  false   x000D       x000D  function onMouseUpdate e    x000D    x   e pageX  x000D    y   e pageY  x000D    console log x  y   x000D    x000D   x000D  function getMouseX     x000D    return x  x000D    x000D   x000D  function getMouseY     x000D    return y  x000D    x000D   x000D   x000D    You can also set x and y to null on mouseleave-event  So you can check if the user is on your page with it s cursor

[javascript] How to get the mouse position without events (without moving the mouse)?

Examples related to javascript

Examples related to mouseevent

Examples related to dom-events