Javascript - 跟踪鼠标位置

2023-11-25

我希望每 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>

鼠标的位置报告在event处理程序收到的对象mousemove事件,您可以将其附加到窗口(事件冒泡):

(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 次/秒)执行某件事,请尝试保留您在该函数中执行的实际处理非常非常有限。对于浏览器来说,这是一项繁重的工作,尤其是较旧的微软浏览器。是的,在现代计算机上,这看起来并不多,但浏览器中发生了很多事情......因此,例如,您可以跟踪您处理的最后一个位置,并在该位置没有发生时立即从处理程序中退出。 t 改变了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Javascript - 跟踪鼠标位置 的相关文章

随机推荐

  • 为什么 Visual Studio 在自分配时不发出警告 (int foo = foo;)

    我正在重构一个出现了无数次的术语 不小心产生了如下代码所示的情况 include stdafx h include
  • 以编程方式切换 Bootstrap 3 导航栏

    我在 Bootstrap 3 导航栏中使用了一些项目 如下所示
  • Autofac复合图案

    我注意到我经常需要实现复合模式 例如 interface IService class Service1 IService class Service2 IService class CompositeService IService pu
  • python - 使用 Django 将 Unicode 字符存储到 MySQL 时出现问题

    我有字符串 u Played Mirror s Edge u2122 应显示为 Played Mirror s Edge 但这是另一个问题 我手头的问题是我将其放入模型中 然后尝试将其保存到数据库中 又名 a models Achievem
  • 如何使用依赖 jar 创建可执行 jar

    我创建了一个依赖于一些外部 jar 的 java 应用程序 现在我想为我的项目创建一个可执行的 jar 这意味着如果我双击该项目 那么它应该执行 您可以使用 Ant 轻松做到这一点
  • Android PhotoView 在方向改变后保持缩放

    我正在利用照片查看器Chris Banes 的课程能够放大图像并查看它 但我想这样做 以便当我更改方向时 照片在更改后仍会放大 我了解如何执行此操作的基础知识 即当检测到方向更改时 将调用 onSaveInstanceState 因此我尝试
  • 破坏 RichTextBox 中的编码

    我在 winform 应用程序中使用 richtextbox 当我粘贴 高棉 文本时一切正常 但是 当我粘贴 阿拉伯语 文本时 会出现一些问题 在第一个插入中存在编码问题 我在 richtextbox 中没有找到任何编码属性 如何解决编码问
  • 如何从文本中提取关键字(标签)

    我目前正在尝试用 Java 实现一个标记引擎 并搜索从文本 文章 中提取关键字 标签的解决方案 我在 stackoverflow 上找到了一些建议使用逐点互信息的解决方案 解决方案1 解决方案2 我不能使用 python 和 nltk 所以
  • 异步请求后如何重定向路由?

    我有我使用的这段代码反应路由器 dom v6用于路由 class App extends Component constructor props super props this state accounts componentDidMou
  • 如何对 pandas 中连续出现的重复项进行分组

    我有一个数据框 其中包含两列 Name In cl 我想按名称分组 但它基于连续发生 例如考虑下面的 DataFrame 生成以下 DF 的代码 df pd DataFrame Name A B B A A B C C C B C In C
  • 将 List 传递到 SQL 参数

    该程序是用 C 编写的 我正在尝试传递一个List
  • 如何在 Android 中以编程方式读取 SHA 和 MD5 指纹

    您好 我想以编程方式读取我的应用程序的签名密钥库的 SHA 和 MD5 指纹值 我将采用 SHA 或 MD5 值作为安全密钥 我将在代码中使用该密钥来加密某些内容并在服务器端解密相同的内容 有什么方法可以找到这个 或者有什么方法可以使用不同
  • 表单验证 - 我收到标签两次

    我有一个注册表单 来自 FOSUserBundle 它位于模板中 form theme form AcmeMyBundle Form errors html twig
  • 无法在脚本中导入导入日期时间[重复]

    这个问题在这里已经有答案了 我无法从 python 脚本导入日期时间 但可以从终端命令行导入 1 import datetime 2 From datetime import datetime month datetime datetime
  • java8数组流到二维数组

    我是 Java8 的新手 无法使用流将一个数组映射到另一个二维数组 我有一个二维数组 它是一种模式 boolean pattern true true false true false true false true true 第二个数组包
  • 未知类型名称 __m256 - AVX 的英特尔内在函数无法识别?

    我正在尝试测试一些英特尔内部函数 看看它们是如何工作的 因此 我创建了一个函数来为我执行此操作 这是代码 void test intel 256 m256 res vec1 vec2 M256 MM SET PS vec1 7 0 7 0
  • Python tkinter 禁用按钮直到所有字段都被填充

    假设我在 tkinter 中有 2 个条目小部件 1 个选项菜单 下拉列表 和 1 个按钮 在用户填充所有 3 个小部件之前 如何将按钮小部件状态设置为 禁用 这就是我当前所拥有的 import Tkinter as tk root tk
  • 颤振删除应用栏上的后退按钮

    我想知道是否有人知道如何删除显示在屏幕上的后退按钮appBar当您使用 flutter 应用程序时Navigator pushNamed转到另一个页面 我不希望它出现在这个结果页面上的原因是它来自导航 我希望用户使用logout按钮 以便会
  • Spring Data Mongodb批量操作示例

    有人可以给我指点 Spring Data Mongodb DB 批量操作示例的完整示例吗 我正在尝试使用 spring data mongodb 切换到批量更新 无法找到一个好的例子 谢谢 Spring data mongodb 中的 Bu
  • Javascript - 跟踪鼠标位置

    我希望每 t 毫秒定期跟踪鼠标光标的位置 所以本质上 当页面加载时 这个跟踪器应该启动并且 比如说 每 100 毫秒 我应该获取 posX 和 posY 的新值并将其打印在表单中 我尝试了以下代码 但值没有刷新 只有 posX 和 posY