跟踪鼠标位置

我希望跟踪鼠标光标的位置，周期性地每t秒。因此，从本质上讲，当一个页面加载时，这个跟踪器应该开始，(比如说)每100毫秒，我应该得到posX和posY的新值，并将其打印到表单中。

我尝试了下面的代码-但值不会刷新-只有posX和posY的初始值显示在表单框中。有什么办法能让它运行起来吗?

<html>
<head>
<title> Track Mouse </title>
<script type="text/javascript">
function mouse_position()
{
    var e = window.event;

    var posX = e.clientX;
    var posY = e.clientY;

    document.Form1.posx.value = posX;
    document.Form1.posy.value = posY;

    var t = setTimeout(mouse_position,100);

}
</script>

</head>

<body onload="mouse_position()">
<form name="Form1">
POSX: <input type="text" name="posx"><br>
POSY: <input type="text" name="posy"><br>
</form>
</body>
</html>

当前回答

如果有人还在寻找答案，

function track(e) {
  console.log("X - ", e.pageX, " Y - ", e.pageY);
}
addEventListener("mousemove", track, false);

将此代码粘贴到控制台以查看立即的操作

2022-03-19 03:27:13

其他回答

最近，我们必须找到当前的x,y位置，以枚举光标所悬停的元素，而不依赖于z-index。我们最终只是附加了一个鼠标移动事件监听器到文档，例如，

功能findElements(e) ( var els =文档。clientX, clientY); 和els一起做酷的东西游戏机。log (els); return; ) 文档。addEventListener (mousemove”、“findElements);

2020-12-19 05:32:42

无论使用哪种浏览器，以下几行都能让我获取正确的鼠标位置。

事件。clientX - event.currentTarget.getBoundingClientRect().left 事件。clientY - event.currentTarget.getBoundingClientRect().top

2017-02-17 08:26:18

onmousemove = function(e){console.log("mouse location:", e.clientX, e.clientY)}

打开控制台(Ctrl+Shift+J)，复制粘贴上面的代码，并在浏览器窗口上移动鼠标。

2015-12-18 03:55:58

只是一个简化版的@ tj。克劳德和@RegarBoy的回答。

在我看来，少即是多。

查看onmousemove事件以获得有关该事件的更多信息。

每次鼠标根据水平坐标和垂直坐标移动时，都会有一个新的posX和posY值。

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Example Mouse Tracker</title>
      <style>    
        body {height: 3000px;}
        .dot {width: 2px;height: 2px;background-color: black;position: absolute;}
      </style>
    </head>
    <body>
    <p>Mouse tracker</p>
    <script>
    onmousemove = function(e){
        //Logging purposes
        console.log("mouse location:", e.clientX, e.clientY);

        //meat and potatoes of the snippet
        var pos = e;
        var dot;
        dot = document.createElement('div');
        dot.className = "dot";
        dot.style.left = pos.x + "px";
        dot.style.top = pos.y + "px";
        document.body.appendChild(dot);
    }      
    </script>
    </body>
    </html>

2020-04-11 20:50:53

[...document.querySelectorAll("*")].forEach(h => h.addEventListener("mousemove", function(event) {
    console.table({
        "mouse x": event.clientX,
        "mouse y": event.clientY
    });
}));

2022-05-01 03:22:57

跟踪鼠标位置

推荐文章

最新文章

标签