跟踪鼠标位置

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

当前回答

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

其他回答

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

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

如果有人还在寻找答案，

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

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

2022-03-19 03:27:13

这是获取鼠标指针坐标的最短方法。只需将元素放在光标所在的位置，在$("")内

 $("***enter you element here***").mousemove(function(event)
{
 console.clear()
  var x = event.originalEvent.screenX;
  var y = event.originalEvent.screenY;
  console.log("x : "+x)
  console.log("y : "+y)
})

2021-05-23 13:39:08

如果只是想直观地跟踪鼠标移动:

<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; } </style> <body> <canvas></canvas> <script type="text/javascript"> var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d'), beginPath = false; canvas.width = window.innerWidth; canvas.height = window.innerHeight; document.body.addEventListener('mousemove', function (event) { var x = event.clientX, y = event.clientY; if (beginPath) { ctx.lineTo(x, y); ctx.stroke(); } else { ctx.beginPath(); ctx.moveTo(x, y); beginPath = true; } }, false); </script> </body> </html>

2019-06-25 18:07:55

基于ES6的代码

let handleMousemove = (event) => {
  console.log(`mouse position: ${event.x}:${event.y}`);
};

document.addEventListener('mousemove', handleMousemove);

如果你需要节流鼠标移动，使用这个:

let handleMousemove = (event) => {
  console.warn(`${event.x}:${event.y}\n`);
};

let throttle = (func, delay) => {
  let prev = Date.now() - delay;
  return (...args) => {
    let current = Date.now();
    if (current - prev >= delay) {
      prev = current;
      func.apply(null, args);
    }
  }
};

// let's handle mousemoving every 500ms only
document.addEventListener('mousemove', throttle(handleMousemove, 500));

这里有一个例子

2017-08-01 11:44:49

跟踪鼠标位置

推荐文章

最新文章

标签