2025-01-05 10:00:02

跟踪鼠标位置

我希望跟踪鼠标光标的位置,周期性地每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>

当前回答

我没有足够的声誉来发布评论回复,但采用了TJ克劳德的出色回答,并在100毫秒的计时器上完整地定义了代码。(他把一些细节留给大家想象。)

感谢OP的提问,感谢TJ的回答!你们俩都帮了大忙。代码嵌入在下面,作为isbin的镜像。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> <style> body { height: 3000px; } .dot { width: 2px; height: 2px; background-color: black; position: absolute; } </style> </head> <body> <script> (function() { "use strict"; var mousePos; document.onmousemove = handleMouseMove; setInterval(getMousePosition, 100); // setInterval repeats every X ms function handleMouseMove(event) { var eventDoc, doc, body; event = event || window.event; // IE-ism // If pageX/Y aren't available and clientX/Y are, // calculate pageX/Y - logic taken from jQuery. // (This is to support old IE) if (event.pageX == null && event.clientX != null) { eventDoc = (event.target && event.target.ownerDocument) || document; doc = eventDoc.documentElement; body = eventDoc.body; event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0); event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0 ); } mousePos = { x: event.pageX, y: event.pageY }; } function getMousePosition() { var pos = mousePos; if (!pos) { // We haven't seen any movement yet, so don't add a duplicate dot } else { // Use pos.x and pos.y // Add a dot to follow the cursor 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>

其他回答

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

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

这是追踪鼠标位置的最简单方法

Html

<body id="mouse-position" ></body>

js

document.querySelector('#mouse-position').addEventListener('mousemove', (e) => {
        console.log("mouse move X: ", e.clientX);
        console.log("mouse move X: ", e.screenX);


    }, );

知道更多

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

我认为我们想太多了,

函数mouse_position (e) { / /做东西 } <身体onmousemove = " mouse_position(事件)" > < /身体>

如果有人还在寻找答案,

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

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