javascript - 显示鼠标位置

Question

如何在 div 中显示鼠标的位置？一旦我们将鼠标移动到新位置，div 中显示的值应该会发生变化。

HTML

<div id="info"></div>

CSS

#info{
position:absolute;
bottom:20px;
right:20px;
width:100px;
height:100px;
background-color:black;
}

我希望鼠标的位置显示在黑色 div“信息”内。每次移动时都必须刷​​新里面的值，并且应该在我们移动鼠标时显示鼠标的位置。

Answer 1

这是 jQuery 解决方案

$(document).ready(function() {
    $(this).on("mousemove", function(event) {
        var position = "X Coordinate: " + event.pageX + " Y Coordinate: " + event.pageY
        $("div").filter("#info").text(position);       
    });
});

http://jsfiddle.net/L7zkvnqr/1/

首先，您监听 mousemove 事件，将 event 作为参数传递很重要。

您现在要使用 pageX 和 pageY 属性声明一个变量。它们分别返回鼠标位置的 x 和 y 坐标。

然后使用text() 函数并传入您刚刚定义的新位置变量。

这是一个 JavaScript 解决方案

document.body.addEventListener("mousemove", function(event) {
    var div = document.querySelector("#info");
    var position = "X Coordinate: " + event.clientX + " Y Coordinate: " + event.clientY;
    div.innerHTML(position);
});