跟踪鼠标位置

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

当前回答

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

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

2020-12-19 05:32:42

其他回答

最近，我们必须找到当前的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

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

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

我认为他只想知道光标的X/Y位置，而不是为什么答案那么复杂。

// Getting 'Info' div in js hands var info = document.getElementById('info'); // Creating function that will tell the position of cursor // PageX and PageY will getting position values and show them in P function tellPos(p){ info.innerHTML = 'Position X : ' + p.pageX + '<br />Position Y : ' + p.pageY; } addEventListener('mousemove', tellPos, false); * { padding: 0: margin: 0; /*transition: 0.2s all ease;*/ } #info { position: absolute; top: 10px; right: 10px; background-color: black; color: white; padding: 25px 50px; } <!DOCTYPE html> <html> <body> <div id='info'></div> </body> </html>

2016-09-14 06:02:34

基于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

跟踪鼠标位置

推荐文章

最新文章

标签