javascript - 为什么 clientX 和 Y 在滚动时会发生变化？

Question

我创建了一个在鼠标移动时跟随鼠标 x 和 y 坐标的形状。您可以在此处查看结果:http://codepen.io/anon/pen/qNKgqo

这会很好用，形状位于鼠标光标的中心。不幸的是我有一些问题。

正如您在 demo 中看到的那样我有一个部分，它位于屏幕的顶部。在 HTML 标记的最顶部，您会注意到一个注释部分。如果删除注释标记，则会设置一个新部分。当您将鼠标悬停在元素上时，结果与之前相同，但是当您滚动到下一部分 - 三个拇指的那个部分时，您会注意到该形状没有以鼠标为中心，而是偏移了。只有当您将鼠标悬停在底部时，您才会看到一小块形状。

要使圆圈以鼠标光标的中心为中心，我使用以下脚本:

  var target = $(this);
  var dot = target.find('.pointer');

  var height = dot.height();
  var width = dot.width();

  var offset = target.offset();
  var top = offset.top;
  var left = offset.left;

  var mX = (event.clientX - left) - width / 2;
  var mY = (event.clientY - top) - height / 2;

以上代码来自 mouseMove 函数，它将在鼠标移动时触发。

我的问题是我做错了什么或我的代码中缺少什么。当只有一个部分时，它可以正常工作，但在将另一部分添加到 HTML 标记后，它就会变得一团糟。

Answer 1

pageX and pageY:

相对于浏览器中完全呈现的内容区域的左上角。此引用点位于左上角的网址栏和后退按钮下方。该点可以位于浏览器窗口中的任何位置，如果页面中嵌入了可滚动页面并且用户移动了滚动条，则该点实际上可以更改位置。

因此使用pageX 和pageY 而不是clientX/Y:

  var mX = (event.pageX - left) - width / 2;
  var mY = (event.pageY - top) - height / 2;

有关更多详细信息，请阅读 clientX/Y and pageX/Y 之间的差异？