Question

我在Ajaxian上找到了这个片段，但我似乎无法使用cursor.y（或cursor.x）作为变量，并且在调用该函数时它似乎不起作用。是否存在语法问题或其他问题？

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

如果可能的话，我不会使用jQuery UI，因为我总是认为jQuery和librarys对于大多数JS编程来说有点过分。

Answer 1

这一直是difficult to achieve cross-browser，但这和你能得到的一样好......

<!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>

Answer 2

必须使用处理程序中的事件对象在鼠标事件处理程序内调用此代码段。

Answer 3

//编辑//以防我误解你无法在javascript中设置鼠标的物理位置。

所以我在这里找到了答案，所以我将简单地链接到它用于学习目的。 Show mouse x and y position with javascript

编辑----想分享对我有用的东西。

这是我在上面链接中找到的代码的一种形式，我稍微改变了一下。好像我必须把某些东西放到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;
}

没有jQuery，可以在网站上获得相对于网站的javascript鼠标位置

3 个答案: