跟踪鼠标位置

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

当前回答

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

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

2015-12-18 03:55:58

其他回答

这里有一个解决方案

document.onmousemove = showCoords;
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("box1").innerHTML = coords;
}

2021-05-27 08:43:11

[...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

以下是两个需求的组合:每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);
}

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

2019-11-20 10:32:09

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

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

2015-12-18 03:55:58

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

Html

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

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


    }, );

知道更多

2020-12-17 17:26:50

跟踪鼠标位置

推荐文章

最新文章

标签