如何检测用户鼠标移动的距离?

2023-11-27

我正在尝试检测鼠标移动的距离(以像素为单位)。我目前正在使用:

$(document).mousemove(function(event) {
    var startingTop = 10,
        startingLeft = 22,
        math = Math.abs(((startingTop - event.clientY) + (startingLeft - event.clientX)) + 14) + 'px';
    $('span').text('From your starting point(22x10) you moved:   ' + math);
});

但是,我觉得这不是正确的方法,不是吗?对我来说感觉不太一致。

这是它现在如何工作的演示:http://jsfiddle.net/Em4Xu/1/

额外细节:

我实际上正在开发一个拖放插件,我想创建一个名为distance,就像draggable一样,你必须在拖动鼠标之前将鼠标拉动一定数量的像素。我不是 100% 确定如何执行此操作,因此首先我需要获取鼠标从startingTop 和startingLeft 位置移动的像素。

有没有人有什么建议?


这是一个测量鼠标移动距离的版本:

var totalDistance = 0;
var lastSeenAt = {x: null, y: null};

$(document).mousemove(function(event) {
    if(lastSeenAt.x) {
        totalDistance += Math.sqrt(Math.pow(lastSeenAt.y - event.clientY, 2) + Math.pow(lastSeenAt.x - event.clientX, 2));
        
    $('span').text('So far your mouse ran this many pixels:   ' + Math.round(totalDistance));
    
    }
    lastSeenAt.x = event.clientX;
    lastSeenAt.y = event.clientY;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span></span>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何检测用户鼠标移动的距离? 的相关文章

  • 带有淘汰赛js的隐形recaptcha

    我正在完成隐形验证码 但我在实现它时遇到问题 谷歌开发人员页面中的代码显示它应该是这样的
  • 如何针对 Node.js 中发生的每个错误发送电子邮件?

    假设我的 node js 应用程序正在运行 如果出现错误 我的意思是所有错误 不仅仅是网络错误 如果出现错误 则很重要 我如何调用函数向我发送电子邮件 基本上 在我希望它写入 err out 之前 我希望向我发送一封电子邮件 我正在使用no
  • 如何将函数附加到弹出窗口关闭事件(Twitter Bootstrap)

    我做了一些搜索 但我只能认为我可以将事件附加到导致其关闭的按钮 https stackoverflow com questions 13205103 attach event handler to button in twitter boo
  • JQuery Mobile 与 MVC 的链接

    我正在使用 ASP NET MVC 3 和 Razor UI 设置 JQuery 移动网站 我正在生成我的链接 例如 a href See Group 2 a 假设我从 Home Index 访问它 我遇到的问题是 当我点击链接时 它会出现
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • 如何制作没有 ng-repeat 的模板并使用 Angular-drag-and-drop-lists 将数据传递到 $scope?

    我想用角度拖放列表 https github com marceljuenemann angular drag and drop lists使用我自己的网格模板到所见即所得编辑器 如何构建我自己的 HTML 模板而不需要ng repeat因
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov
  • Jquery一键提交多个同名表单

    我有动态创建的循环表单 我需要一键提交所有表单 我正在遵循下面的代码 你能建议我怎么做吗 谢谢
  • 正则表达式 - 从 markdown 字符串中提取所有标题

    我在用灰质 https www npmjs com package gray matter 以便将文件系统中的 MD 文件解析为字符串 解析器产生的结果是这样的字符串 n Clean er ReactJS Code Conditional
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 在 Javascript 中连接空数组

    我正在浏览一些代码 我想知道这有什么用处 grid push concat row 根据我的理解 它等同于 grid push row 为什么要大惊小怪 连接 你想使用 concat当您需要展平数组并且没有由其他数组组成的数组时 例如 va
  • 用于交互式图形绘制的轻量级 JavaScript 库? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我有兴趣了解用于绘制交互式图表的最轻量级 javascript 库 我掌握的数据主要是与海洋研究相关的科学数据 我知道一些 jquery
  • Jquery - 选择选项后如何获取选项的特定数据类型?

    我将直接跳到标记 然后解释我想要做什么 HTML 选择选项
  • 如何确定所有角度2分量都已渲染?

    当所有 Angular2 组件完成渲染时 是否会触发一个角度事件 For jQuery 我们可以用 function 然而 对于 Angular2 当domready事件被触发 html 只包含角度组件标签 每个组件完成渲染后 domrea
  • 如何使用asm.js进行测试和开发?

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐

  • WP8 项目:“CompileXaml”任务意外失败

    我在计算机上重新安装了 Windows 在 Visual Studio 2012 for Windows Phone 中打开任何 Windows Phone 8 项目后 收到以下错误消息 The CompileXaml task faile
  • ?: 运算符在 C 中究竟如何工作?

    我有一个问题 编译器如何运行以下代码 include
  • 仅使用 Django 的 DB 部分

    有人知道 Django 有多 模块化 吗 我可以只使用 ORM 部分来获取映射到数据库表的类并知道如何从这些表中读取 写入吗 如果没有 您会推荐什么作为 Hibernate 的 Python 等价物 如果您喜欢 Django 的 ORM 独
  • 如何在Android中的EditText上设置自定义字体?

    我正在尝试在EditText 与我目前正在做的事情相比 有人有更好的方法吗 Typeface myFont Typeface createFromAsset getAssets fonts myfont ttf edittext setTy
  • FSharp 构建在 MSBuild 中失败,但在 Visual Studio 中工作正常

    我的解决方案中有许多项目 其中还有一个 F 项目 在 Visual Studio 中一切都构建得很好 但是当我尝试在 TeamCity 服务器 未安装 VS 上使用 MSBuild 构建它时 它会抛出以下构建错误 C TeamCity bu
  • __callStatic()、call_user_func_array()、引用和 PHP 5.3.1

    我一直在阅读有关 SO 和其他地方的内容 但我似乎找不到任何结论性的东西 是否有任何方法可以有效地通过此调用堆栈携带引用 从而实现如下示例中所述的所需功能 虽然这个例子并没有试图解决它 但它确实说明了问题 class TestClass s
  • 使用滚动中位数过滤 Pandas 数据框中的异常值

    我正在尝试从带有日期的 GPS 高程位移散点图中过滤掉一些异常值 我尝试使用 df rolling 计算每个窗口的中值和标准差 然后如果它大于 3 个标准差则删除该点 但是 我无法找到一种方法来循环该列并比较滚动计算的中值 这是我到目前为止
  • 如何用sed插入包含斜杠的字符串? [复制]

    这个问题在这里已经有答案了 我有一个 Visual Studio 项目 是本地开发的 代码文件必须部署到远程服务器 唯一的问题是它们包含的 URL 这些 URL 是硬编码的 该项目包含 URL 例如 page one 为了使链接在服务器上有
  • H2 DB - 列必须位于分组依据列表中

    我正在使用 H2 DB 访问静态数据库 我有一张桌子 看起来像 COUNTRY STATE CITY LAT LNG COUNTRYID STATEID CITYID Germany Berlin 1 23 1 23 1 1 0 Germa
  • Laravel 以良好的方式从控制器定义默认布局

    我用谷歌搜索了两个小时 但没有找到答案 也许你能帮忙 当我定义在我的控制器 class MyController extends Base Controller public layout layouts default public fu
  • Spark-submit/spark-shell>yarn-client和yarn-cluster模式的区别

    我正在使用 YARN 运行 Spark 从链接 http spark apache org docs latest running on yarn html 我找到了不同纱线模式的解释 即 masterSpark 可以运行的选项 有两种部署
  • 我可以在运行时修改Java方法的字节码吗?

    我正在编写另一个大型java程序的插件 我想在运行时修改java程序的某些java方法的一些字节码 以便能够拦截方法调用 即向方法中注入一些hook代码 有什么办法可以达到这个目的吗 PS 我检查了以下方法 1 更改java程序的类加载器
  • Pandas 从列中可用的列表数据中扩展行

    我在 pandas 中有一个像这样的数据框 column1 column2 a b c 1 d e f 2 g h i 3 预期输出 column1 column2 a 1 b 1 c 1 d 2 e 2 f 2 g 3 h 3 i 3 如
  • 具有自动生成功能的 .NET ORM 解决方案:Subsonic、Castle AR,...?

    我曾经使用自定义数据映射库 目前我正在尝试切换到更广泛的 ORM 解决方案 经过一些实验 我将我的要求细化为以下几点 能够从数据库模式生成可用的类 SQL Server 支持就足够了 支持ActiveRecord模式 以编程方式配置 通过代
  • 为 GGPlot2 直方图中高于 X 值的任何内容创建一个 bin

    Using ggplot2 我想创建一个直方图 其中 X 以上的任何内容都被分组到最终的 bin 中 例如 如果我的大部分分布在 100 到 200 之间 并且我想按 10 进行分类 那么我希望将 200 以上的任何内容分类到 200 中
  • 以编程方式用数组填充数组

    这是创建名为的数组的数组的代码sims通过 for 循环并使用str1 到目前为止我需要定义sims手动长度 等于长度str1 like let sims 四个数组等于四个字str1 如何以编程方式用数组填充模拟人生 var str1 do
  • Sqlite3 - 如何从 csv 导入 NULL 值

    我已将 mysql 表转储为 CSV 在此 CSV 文件中 NULL 值写为 N现在我想将此数据导入到 sqlite 数据库中 但我无法告诉 sqlite N是空值 它将其视为字符串 并且该列值存储为 N 而不是 NULL 谁能指导一下如何
  • 如何使用动态键循环 PHP 对象[重复]

    这个问题在这里已经有答案了 我尝试使用 PHP 解析 JSON 文件 但我现在被困住了 这是我的 JSON 文件的内容 John status Wait Jennifer status Active James status Active
  • 匿名类型

    我有一个Dictionary TKey TValue like Dictionary
  • 如何检测用户鼠标移动的距离?

    我正在尝试检测鼠标移动的距离 以像素为单位 我目前正在使用 document mousemove function event var startingTop 10 startingLeft 22 math Math abs startin