草庐IT

javascript - jquery鼠标移动捕获不准确

coder 2024-07-26 原文

我遇到了一个奇怪的问题。 我用以下方法捕捉鼠标移动:

var mmoves = [];
jQuery(document).mousemove(function(event) {
   mmoves.push({x:event.pageX, y:event.pageY})
}

然后我将一个 div 附加到页面，如:

$("body").append('<div id="mouseemul" style="padding:0; margin:0; color: red; background-color: blue; width: 1px; height: 1px;">*</div>');

然后尝试回放 Action

它在大多数页面上工作正常，但在某些页面上播放开始(“*”初始位置)右侧 (x) 的一些像素。 y 没问题，但 x 向右大约 120px。在其他页面上它是准确的。在不准确的页面上，当鼠标靠近右侧滚动条时，它会超出右侧页面边框并产生水平滚动条。

我认为这与正在播放的页面的某些 css 样式有关。

有人知道是什么原因造成的吗？ 我怎样才能得到实际的偏移量(以防此类页面有偏移量)？

非常感谢，

埃尔南

--编辑-- 很明显，x 位移是由于主文档的定位造成的。第一个元素给出的 $.position() 为 0,134，如果我从记录的数据中减去该数量，则回放是准确的。问题是这种位移不会发生在每一页上，我不知道如何确定位移发生的时间和不发生的时间(通过减法来纠正它)。

最佳答案

录音

如果您想捕获和重放鼠标移动，您可以尝试从文档“录制”。 这将使用窗口中的 x 和 y 和弦。

为此，您可以使用文档 DOM 元素:

var m = [];

// Using the document instead of body might solve your issue
$( document ).mousemove(function( e ){

  m.push({ x : e.pageX, y : e.pageY });

});

重放

HTML/CSS

您的 HTML/CSS 应该是页面上的一个 div，设置了 position: fixed，它应该与您的 javascript 和弦样本匹配，因为 fixed 绝对定位到窗口:

<style>
    .replay {
        /* Use position fixed to match window chords */
        position: fixed;
        top: 0;
        left: 0;

        /* These are just for show */
        border-radius: 20px;
        background: red;
        width: 10px;
        height: 10px;
    }
</style>

<div class="replay"></div>

Javascript

要重播您捕获的和弦，您可以使用如下内容:

var $replay = $('.replay'), // Get mouse simulator
    i = 0, l = m.length,
    pos, t;

// Recursive animation function
function anim(){

  // Cache current position
  pos = m[i];

  // Move to next position
  $replay.css({ top: pos.y, left: pos.x });

  i++;

  // Exit recursive loop
  if ( i === l )
     clearTimeout( t );
  // Or keep going
  else
    t = setTimeout(anim, 100); // Timeout speed controls animation speed

}

// Start animation loop
anim();

演示

在这个 上试试看 demo .

关于javascript - jquery鼠标移动捕获不准确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6709321/

javascriptjquerycodesectionpositiondom

有关javascript - jquery鼠标移动捕获不准确的更多相关文章

  1. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组，我们在StackOverflow上找到一

  2. ruby-on-rails - 如何重命名或移动 Rails 的 README_FOR_APP - 2

    当我在我的Rails应用程序根目录中运行rakedoc:app时，API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名，以便它在GitHub上正确呈现。更好的是，我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作？是否有某个地方可以查找可以修改的主页文件的名称？还是我必须编写一个新的Rake任务？额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么？为什么不只有一个？

  3. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  4. ruby-on-rails - rbenv:从 RVM 移动到 rbenv 后，在 Jenkins 执行 shell 中找不到命令 - 2

    我从Ubuntu服务器上的RVM转移到rbenv。当我使用RVM时，使用bundle没有问题。转移到rbenv后，我在Jenkins的执行shell中收到“找不到命令”错误。我内爆并删除了RVM，并从~/.bashrc'中删除了所有与RVM相关的行。使用后我仍然收到此错误:rvmimploderm~/.rvm-rfrm~/.rvmrcgeminstallbundlerecho'exportPATH="$HOME/.rbenv/bin:$PATH"'>>~/.bashrcecho'eval"$(rbenvinit-)"'>>~/.bashrc.~/.bashrcrbenvversions

  5. ruby - 如何让Ruby捕获线程中的语法错误 - 2

    我正在尝试使用ruby​​编写一个双线程客户端，一个线程从套接字读取数据并将其打印出来，另一个线程读取本地数据并将其发送到远程服务器。我发现的问题是Ruby似乎无法捕获线程内的错误，这是一个示例:#!/usr/bin/rubyThread.new{loop{$stdout.puts"hi"abc.putsefsleep1}}loop{sleep1}显然，如果我在线程外键入abc.putsef，代码将永远不会运行，因为Ruby将报告“undefinedvariableabc”。但是，如果它在一个线程内，则没有错误报告。我的问题是，如何让Ruby捕获这样的错误？或者至少，报告线程中的错误？

  6. ruby-on-rails - 无法在 Rails 助手中捕获 block 的输出 - 2

    我在使用自定义RailsFormBuilder时遇到了问题，从昨天晚上开始我就发疯了。基本上我想对我的构建器方法之一有一个可选block，以便我可以在我的主要content_tag中显示其他内容。:defform_field(method,&block)content_tag(:div,class:'field')doconcatlabel(method,"Label#{method}")concattext_field(method)capture(&block)ifblock_given?endend当我在我的一个Slim模板中调用该方法时，如下所示:=f.form_field:e

  7. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  8. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  9. ruby - 在 ruby​​ 中生成一个进程，捕获 stdout，stderr，获取退出状态 - 2

    我想从ruby​​rake脚本运行一个可执行文件，比如foo.exe我希望将foo.exe的STDOUT和STDERR输出直接写入我正在运行rake任务的控制台.当进程完成时，我想将退出代码捕获到一个变量中。我如何实现这一目标？我一直在玩backticks、process.spawn、system但我无法获得我想要的所有行为，只有部分更新:我在Windows上，在标准命令提示符下，而不是cygwin 最佳答案 system获取您想要的STDOUT行为。它还返回true作为零退出代码，这可能很有用。$?填充了有关最后一次system调

  10. ruby - 捕获 Ruby Logger 输出以进行测试 - 2

    我有一个像这样的ruby​​类:require'logger'classTdefdo_somethinglog=Logger.new(STDERR)log.info("Hereisaninfomessage")endend测试脚本行如下:#!/usr/bin/envrubygem"minitest"require'minitest/autorun'require_relative't'classTestMailProcessorClasses当我运行这个测试时，out和err都是空字符串。我看到消息打印在stderr上(在终端上)。有没有办法让Logger和capture_io一起玩得

随机推荐