Getting javascript mouse position relative to website prefferably without jQuery

Question

I've found this snippet on Ajaxian, but I can't seem to use the cursor.y (or cursor.x) as a variable and when the function is called as such it does not seem to work. Is there a syntax problem or something else?

function getPosition(e) {
    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) {
      cursor.x = e.pageX;
      cursor.y = e.pageY;
    } 
    else {
      cursor.x = e.clientX + 
        (document.documentElement.scrollLeft || 
         document.body.scrollLeft) - 
         document.documentElement.clientLeft;
      cursor.y = e.clientY + 
        (document.documentElement.scrollTop ||
         document.body.scrollTop) - 
         document.documentElement.clientTop;
    }
    return cursor;
}

I'd preffer not to use jQuery UI if possible, since I've always thaught of jQuery and librarys as a bit of an overkill for most JS programing.

Hurray! There's actually another person who doesn't like JS libraries =D — Chibu, Mar 23 '10 at 14:57
`I'd prefer not to use jQuery if possible` ... You cannot begin to imagine what you're missing. Note that jQuery is not the same as jQuery UI. — SLaks, Mar 23 '10 at 15:01
Seems you may be suffering from NIH syndrome http://en.wikipedia.org/wiki/Not_Invented_Here . (most) Experienced developer recognize the utility of good libraries and leverage them when indicated. In this particular case, you are just making more work for youself than you know. Good luck with that. — Sky Sanders, Mar 23 '10 at 15:04
He is saying metaphoricaly that you don't need a 70kb+ library for trivial tasks — Constructor, Mar 23 '10 at 15:11
I am not going to try to convince anybody to use a library. It's just like me not wanting to use regular expressions. So what? There are a billion ways to accomplish any given development task, and libraries are never *needed*. — Josh Stodola, Mar 23 '10 at 15:11
http://www.jslint.com/ is great for the "is there a syntax problem?" part. — Bryan, Mar 23 '10 at 15:17
@Bryan I'd say "too great". there is also [JsHint](http://www.jshint.com/). — Camilo Martin, Jul 01 '12 at 15:13

Josh Stodola · Answer 1 · 2010-03-23T15:12:46.593

This has always been difficult to achieve cross-browser, but this is about as good as you can get...

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Test</title>
    <script type="text/javascript"> 
      window.onload = function() {
        document.onmousemove = function(e) {
          if(!e) e = window.event;

          if(e.pageX == null && e.clientX != null) {
            var doc = document.documentElement, body = document.body;

            e.pageX = e.clientX
                    + (doc && doc.scrollLeft || body && body.scrollLeft || 0)
                    - (doc.clientLeft || 0);

            e.pageY = e.clientY
                    + (doc && doc.scrollTop || body && body.scrollTop || 0)
                    - (doc.clientTop || 0);
          }

          document.getElementById("pos").innerHTML = e.pageX + ", " + e.pageY;
        }
      } 
    </script>
  </head>
  <body> 
    <h1>Position: <span id="pos">0, 0</span></h1>
  </body>
</html>

For what it's worth, this is how jQuery does it – Josh Stodola Mar 23 '10 at 15:08 — Josh Stodola, Mar 23 '10 at 15:08

score 0 · Answer 2 · edited May 23 '17 at 12:32

//edit//Just in case I misunderstood you can not set the mouse's physical position in javascript.

So I found an answer kind of on here so I shall Simply Link to it for study purposes. Show mouse x and y position with javascript

Edited----Wanted to share what worked for me.

This is a form of the code I found at above link I changed slightly. It seems as though I must put certain things to window.onload.

window.onload = function () {
                IE = (navigator.appName == "Microsoft Internet Explorer") ? true : false;


    if (!IE) {
                document.captureEvents(Event.MOUSEMOVE);
                document.captureEvents(Event.MOUSEDOWN);
    }
                document.onmousemove = function (e) {mousePos(e);};

                document.onmousedown = function (e) {mouseClicked();};
};


            var mouseClick;
            var keyClicked;
            var mouseX = 0;
            var mouseY = 0;

function mousePos (e) {
    if (!IE) {
                mouseX = e.pageX; 
                mouseY = e.pageY;
    }else{
                mouseX = event.clientX + document.body.scrollLeft;
                mouseY = event.clientY + document.body.scrollTop;
    }
                return true;
}

score 0 · Answer 3 · answered Mar 23 '10 at 15:00

0

This snippet must be called inside a mouse event handler, with the event object from the handler.

answered Mar 23 '10 at 15:00

SLaks

868,454
176
1,908
1,964

Yes I called it like this onclick="getPosition(e); anotherfunct();" (and yes, the variable is used within anotherfunct() – Constructor Mar 23 '10 at 15:02
You need to pass `event`, not `e`. Also, how are you passing the return value to `anotherfunc`? – SLaks Mar 23 '10 at 15:04
1

This function does not create a global `cursor` variable. You need to explicitly pass its return value to `anotherFunc` as a parameter, or modify the function. – SLaks Mar 23 '10 at 15:08
even if I remove the var infrom of cursor (making it a global variable) it still doesn't work, why? – Constructor Mar 23 '10 at 15:23
Are you passing `event` instead of `e`? It works for me: http://jsbin.com/onewe/2/edit – SLaks Mar 23 '10 at 15:47
thank you, it works great! Nice tool for javascript examples btw – Constructor Mar 23 '10 at 19:16
Then you should accept this answer by clicking the hollow check. – SLaks Mar 23 '10 at 20:31

Getting javascript mouse position relative to website prefferably without jQuery

3 Answers3