41

I need to get a hold of the absolute mouse position / coordinates (X and Y) using (preferably) jQuery like in this tutorial but outside of any JavaScript event. Thank you.

pbz
  • 8,865
  • 14
  • 56
  • 70

4 Answers4

47

Not possible. You can however use the same approach in the tutorial to store the position in a global variable and read it outside the event.

Like this:

jQuery(document).ready(function(){
   $().mousemove(function(e){
      window.mouseXPos = e.pageX;
      window.mouseYPos = e.pageY;
   }); 
})

You can now use window.mouseXPos and window.mouseYPos from anywhere.

Chetan S
  • 23,637
  • 2
  • 63
  • 78
29

This started as a comment on Chetan Sastry's answer, but I realized it also might be worth posting as an answer:

I'd be careful about having a document-level, always-running mousemove event, even if you're only polling for cursor position. This is a lot of processing and can bog down any browser, particularly slower ones like IE.

A problem like this almost certainly raises the question of design decision: if you don't need to handle a mouse event to poll for the cursor position, do you really need the cursor position? Is there a better way to solve the problem you're trying to solve?

Edit: even in Safari 4, which is (understatement) very fast, that single mousemove event makes every interaction with that tutorial page noticeably choppy for me. Think about how that will affect users' perceptions of your site or application.

Community
  • 1
  • 1
eyelidlessness
  • 62,413
  • 11
  • 90
  • 94
  • Not quite true. A mouse event is ALWAYS being generated. That is, when the mouse moves, the browser will compute (thru native code) a mouse event up to but not including executing JS callback functions; it's fundamental to ALL mouse related event listeners. It is simply that the browser fails to provide the common courtesy of exposing that information except thru `document.onmousemove`. This, as far as I'm concerned, is a shortsightedness of the ES5/ES6. Indeed polling mouse position can simplify de-bouncing 'onmousemove' events, such as when moving DOM elements by mouse. – codechimp Feb 07 '18 at 13:31
  • It will compute it for itself, but it won't compute the mousemove event and everything that depends on it unless something subscribes to it. That's just good sense. – eyelidlessness Apr 03 '18 at 05:27
10

This function will decrease the impact on UI performance by only getting the mouse position at an interval: 

function getMousePosition(timeoutMilliSeconds) {
    // "one" attaches the handler to the event and removes it after it has executed once 
    $(document).one("mousemove", function (event) {
        window.mouseXPos = event.pageX;
        window.mouseYPos = event.pageY;
        // set a timeout so the handler will be attached again after a little while
        setTimeout(function() { getMousePosition(timeoutMilliSeconds) }, timeoutMilliseconds);
    });
}

// start storing the mouse position every 100 milliseconds
getMousePosition(100);

Just as in the other answer "You can now use window.mouseXPos and window.mouseYPos from anywhere."

You lose a little accuracy as the mouse move won't be detected during the intervals.

Cogito
  • 357
  • 2
  • 5
Wahtah
  • 109
  • 1
  • 2
  • 6
    You should avoid using eval-like constructs. They are less efficient, and are potential security risks. `setTimeout(function() { getMousePosition(timeoutMilliSeconds) }, timeoutMilliseconds);` – Daniel Yankowsky Oct 20 '11 at 04:15
2

I have try @Chetan Sastry 's soulution,but it does't works.(I'm using jQuery 1.6.4). I change the code and then i works now. Here is my code. I hope this will help.



    $(document).ready(function(){
       $(document).mousemove(function(e){
          window.mouseXPos = e.pageX;
          window.mouseYPos = e.pageY;
       }); 
    });
Sword-Breaker
  • 429
  • 5
  • 10