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

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(使用前将#替换为@)

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

随机推荐

  • 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