ansaurus

Question

Getting javascript mouse position relative to website prefferably without jQuery

Answer 1

A:

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

SLaks 2010-03-23 15:00:37

Yes I called it like this onclick="getPosition(e); anotherfunct();"(and yes, the variable is used within anotherfunct()

Constructor 2010-03-23 15:02:23

You need to pass `event`, not `e`. Also, how are you passing the return value to `anotherfunc`?

SLaks 2010-03-23 15:04:22

example: mouseposx=cursor.x

Constructor 2010-03-23 15:06:06

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 2010-03-23 15:08:24

even if I remove the var infrom of cursor (making it a global variable) it still doesn't work, why?

Constructor 2010-03-23 15:23:58

Are you passing `event` instead of `e`? It works for me: http://jsbin.com/onewe/2/edit

SLaks 2010-03-23 15:47:48

thank you, it works great! Nice tool for javascript examples btw

Constructor 2010-03-23 19:16:44

Then you should accept this answer by clicking the hollow check.

SLaks 2010-03-23 20:31:30

Answer 2

A:

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>

Josh Stodola 2010-03-23 15:05:05

For what it's worth, this is how jQuery does it

Josh Stodola 2010-03-23 15:08:29

ansaurus

tags:

views:

answers:

Getting javascript mouse position relative to website prefferably without jQuery

related questions