Javascript onMouseMove获取鼠标位置

在Javascript中，在onMouseMove的Javascript事件处理程序中，如何获取鼠标在相对于页面顶部的x、y坐标中的位置？

如果可以使用jQuery，则将有助于：

<div id="divA" style="width:100px;height:100px;clear:both;"></div>
<span></span><span></span>
<script>
    $("#divA").mousemove(function(e){
      var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
      var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
      $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
      $("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
    });

</script>

$（“#divA”）.mousemove（函数（e）{
var pageCoords=“（“+e.pageX+”，“+e.pageY+”）；
var clientCoords=“（“+e.clientX+”，“+e.clientY+”）；
$（“span:first”）.text（“（e.pageX，e.pageY）-”+pageCoords）；
$（“span:last”）.text（（（e.clientX，e.clientY）-“+clientCoords）；
});

以下是纯javascript的唯一示例：

var tempX = 0;
  var tempY = 0;

  function getMouseXY(e) {
    if (IE) { // grab the x-y pos.s if browser is IE
      tempX = event.clientX + document.body.scrollLeft;
      tempY = event.clientY + document.body.scrollTop;
    }
    else {  // grab the x-y pos.s if browser is NS
      tempX = e.pageX;
      tempY = e.pageY;
    }  

    if (tempX < 0){tempX = 0;}
    if (tempY < 0){tempY = 0;}  

    document.Show.MouseX.value = tempX;//MouseX is textbox
    document.Show.MouseY.value = tempY;//MouseY is textbox

    return true;
  }

var tempX=0；
var-tempY=0；
函数getMouseXY（e）{
如果（IE）{//如果浏览器是IE，则抓取x-y位置
tempX=event.clientX+document.body.scrollLeft；
tempY=event.clientY+document.body.scrollTop；
}
否则{//如果浏览器为NS，则抓取x-y位置
tempX=e.pageX；
tempY=e.pageY；
}  
如果（tempX<0）{tempX=0；}
如果（tempY<0）{tempY=0；}
document.Show.MouseX.value=tempX；//MouseX是文本框
document.Show.MouseY.value=tempY；//MouseY是文本框
返回true；
}

特别是对于mousemove事件，它会快速而猛烈地触发，在使用它们之前最好先精简处理程序-

var whereAt= (function(){
    if(window.pageXOffset!= undefined){
        return function(ev){
            return [ev.clientX+window.pageXOffset,
            ev.clientY+window.pageYOffset];
        }
    }
    else return function(){
        var ev= window.event,
        d= document.documentElement, b= document.body;
        return [ev.clientX+d.scrollLeft+ b.scrollLeft,
        ev.clientY+d.scrollTop+ b.scrollTop];
    }
})()

---

document.ondblclick=函数（e）{alert（whitet（e））}

仅用于查找鼠标坐标可能有点过分，但它们有一个非常有用的函数，名为

d3.mouse（*container*）

。下面是一个做你想做的事情的例子：

var coordinates = [0,0];
d3.select('html') // Selects the 'html' element
  .on('mousemove', function()
    {
      coordinates = d3.mouse(this); // Gets the mouse coordinates with respect to
                                    // the top of the page (because I selected
                                    // 'html')
    });

---

在上述情况下，x坐标为

坐标[0]

，y坐标为

坐标[1]

。这非常方便，因为您可以通过使用标记（例如

'body'

）、类名（例如

'.class_name'

）或id（例如

'element_id'

）交换

'html'

）来获取鼠标相对于任何想要的容器的坐标。

这在所有浏览器中都可以尝试并使用：

function getMousePos(e) {
    return {x:e.clientX,y:e.clientY};
}

现在，您可以在以下事件中使用它：

document.onmousemove=function(e) {
    var mousecoords = getMousePos(e);
    alert(mousecoords.x);alert(mousecoords.y);
};

注意：上述功能将返回鼠标相对于视口的坐标，该坐标不受滚动的影响。如果您想获得包括滚动在内的坐标，请使用以下功能

function getMousePos(e) {
    return {
        x: e.clientX + document.body.scrollLeft,
        y: e.clientY + document.body.scrollTop
    };
}

---

嗯，js示例似乎非常类似，只是没有方便的注释

id=“#divA”

和

$（“divA”）

——有人在写作时睡着了this@RozzA感谢您的关注。投票支持您的答案，因为我最终还是使用了其中的一部分：）+1，但有一点值得注意：这种方法对于

onmousemove

来说有点太慢了。我的项目中已经有了d3.js，所以我尝试了它，但它对于我的用例来说还不够快。