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

Question

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

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，如果我从记录的数据中减去该数量，则回放是准确的。问题是这种位移不会发生在每一页上，我不知道如何确定位移发生的时间和不发生的时间(通过减法来纠正它)。

Answer 1

录音

如果您想捕获和重放鼠标移动，您可以尝试从文档“录制”。 这将使用窗口中的 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 .