Getting javascript mouse position relative to website prefferably without jQuery_问答_开发者

Getting javascript mouse position relative to website prefferably without jQuery

开发者 https://www.devze.com 2022-12-24 14:46 出处：网络

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 so

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.

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>

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

//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;
}