Javascript 显示鼠标位置

如何在div中显示鼠标的位置？一旦我们将鼠标移动到一个新位置，div中显示的值就会改变

HTML

---

我希望鼠标的位置显示在黑色的div“info”中。每次移动时，里面的值都必须刷新&每次移动鼠标时都应该显示鼠标的位置。

以下是jQuery解决方案

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

首先，您要监听

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

---

所以不是一个脚本请求网站。这个想法是，你告诉我们你已经尝试了什么，你遇到了什么确切的问题。我们会帮助你的。幸运的是，Richard是那种能满足你要求的人。谢谢@Jelmer的评论。我在提出这个问题之前做了一些研究，也做了同样的事情。但我对大部分结果并不满意，因为我是一个初学者。我很确定，这个问题的脚本不会那么长，对专业人士来说会容易得多这里。我只是想得到一个有帮助的答案。对不起，伙计们，如果这是一个错误的转弯。接受反对票，谢谢！简单&我真的在找这个。会的，别忘了这个问题也有一个向上投票的箭头哈哈@汉密尔顿

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

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