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>

当前回答

以下是两个需求的组合:每100毫秒跟踪鼠标位置:

var period = 100,
    tracking;

window.addEventListener("mousemove", function(e) {
    if (!tracking) {
        return;
    }

    console.log("mouse location:", e.clientX, e.clientY)
    schedule();
});

schedule();

function schedule() {
    tracking = false;

    setTimeout(function() {
        tracking = true;
    }, period);
}

这将跟踪并作用于鼠标位置,但只是每周期毫秒一次。

其他回答

我没有足够的声誉来发布评论回复,但采用了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>

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

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

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

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

下面是一个基于jQuery和鼠标事件监听器(这比常规轮询要好得多)的解决方案:

$("body").mousemove(function(e) {
    document.Form1.posx.value = e.pageX;
    document.Form1.posy.value = e.pageY;
})