Javascript - 跟踪鼠标位置

IT技术 javascript
2021-01-26 16:12:11

我希望每隔 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>
6个回答

eventmousemove事件处理程序接收到的对象上报告鼠标的位置,您可以将其附加到窗口(事件气泡):

(function() {
    document.onmousemove = handleMouseMove;
    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 );
        }

        // Use event.pageX / event.pageY here
    }
})();

(请注意,它的主体if只能在旧的 IE 上运行。)

上面的示例- 当您将鼠标拖到页面上时,它会绘制点。(在 IE8、IE11、Firefox 30、Chrome 38 上测试。)

如果你真的需要一个基于计时器的解决方案,你可以将它与一些状态变量结合起来:

(function() {
    var mousePos;

    document.onmousemove = handleMouseMove;
    setInterval(getMousePosition, 100); // setInterval repeats every X ms

    function handleMouseMove(event) {
        var dot, eventDoc, doc, body, pageX, pageY;

        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
        }
        else {
            // Use pos.x and pos.y
        }
    }
})();

据我所知,您在没有看到事件的情况下无法获得鼠标位置,这个对另一个 Stack Overflow 问题的回答似乎证实了这一点

旁注:如果您打算每 100 毫秒(10 次/秒)做某事,请尽量保持您在该函数中所做的实际处理非常非常有限这对浏览器来说是很多工作,尤其是较旧的 Microsoft 浏览器。是的,在现代计算机上它看起来并不多,但是浏览器中发生了很多事情......因此,例如,您可能会跟踪您处理的最后一个位置并立即从处理程序中退出,如果该位置没有“ t变了。

现在使用 pageX/Y、clientX/Y 和 screenX/Y 就安全了。IE很快就会被遗忘,所以比这个简单得多。
2021-03-11 16:12:11
onmousemove = function(e){console.log("mouse location:", e.clientX, e.clientY)}

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

我是最好的答案
2021-03-17 16:12:11
onmousemove = function(e){console.log(`mouse location = X: ${e.x}, Y: ${e.y}`)}
2021-03-20 16:12:11

这是一个解决方案,基于 jQuery 和主体上的鼠标事件侦听器(远胜于常规轮询):

$("body").mousemove(function(e) {
    document.Form1.posx.value = e.pageX;
    document.Form1.posy.value = e.pageY;
})
正如我所提到的,定期投票正是我想要做的。我没有跟踪鼠标事件的变化,我只想每 x 毫秒捕获一次鼠标位置(无论鼠标是否移动)。
2021-03-13 16:12:11
@PattycakeJr此外,如果你超级都不太可能下载它,如果你指向CDN,因为几乎所有的其他网站链接到它
2021-03-21 16:12:11
除了不必要地使用 5mb JS 库之外,在这里使用 jQuery 没有任何优势
2021-03-22 16:12:11
为什么要跟踪您确定没有更改的值?我不明白,除非是作业问题。使用 event 方法,您可以跟踪这些值的每次更改,然后如果出于任何目的需要处理这些值,则在其他地方进行 100 毫秒轮询。
2021-03-24 16:12:11
@PattycakeJr 我最后一次查看它的缩小版本低于 90kB
2021-04-04 16:12:11

我相信我们想多了,

function mouse_position(e)
{
//do stuff
}
<body onmousemove="mouse_position(event)"></body>

我相信这种内联事件处理也已被弃用。document.body.addEventListener("mousemove", function (e) {})是在您的 javascript 代码中而不是在 html 中执行此操作的方法
2021-03-14 16:12:11
我是这个论坛的新手,所以我知道,请解释你为什么 -1nd 我的 awnser - 这样我就不会再犯同样的错误了。谢谢!程序员
2021-03-21 16:12:11
我也对没有解释的downvote感到恼火。为了给你一个可能的解释,这个答案没有解决 OP 每 100 毫秒轮询一次的问题。在他对其他答案的回应中更清楚地表明这是必要的。
2021-03-29 16:12:11

我认为他只想知道光标的 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>