javascript中的event.clientX位置问题答案

【问题标题】：event.clientX position issue in javascriptjavascript中的event.clientX位置问题
【发布时间】：2011-05-14 14:11:03
【问题描述】：

我正在从this page学习javascript示例，

我对函数XY(e, v)中的以下代码sn-ps感到困惑，尤其是这两个语句

event.clientX + document.documentElement.scrollLeft

和

 event.clientY + document.documentElement.scrollTop

谁能告诉我document.documentElement.scrollLeft 和document.documentElement.scrollTop 是什么？以及为什么我们将它添加到event.clientX 和event.clientY 请（即，将它们添加到event.clientX 和event.clientY 时我们可以获得什么有意义的值）？

这是用于 Internet Explorer 的

【问题讨论】：

您的问题是什么？问题更多是关于“那些东西是什么？”为此，您应该通过 Google 或 MDC 进行搜索：developer.mozilla.org/en/DOM

标签： javascript html internet-explorer

【解决方案1】：

clientX - 获取或设置鼠标指针位置相对于窗口客户区的 x 坐标，不包括窗口装饰和滚动条。 http://msdn.microsoft.com/en-us/library/ms533567(VS.85).aspx

scrollLeft - 设置或检索对象左边缘与窗口中当前可见内容的最左侧部分之间的距离。 http://msdn.microsoft.com/en-us/library/ms534617(VS.85).aspx

通俗地说，它是获取屏幕上的鼠标位置（clientX 和 clientY），然后将该值添加到页面的当前滚动位置（scrollLeft 和 scrollTop），以获得该点的总像素位置。

I.E.如果您查看的页面向下滚动了 200 像素，并且鼠标点击发生在客户端查看区域下方 200 像素处，则该页面将位于文档下方 400 像素处。

编辑：

“窗口的客户区”是指您看到/操作页面的 Internet Explorer 的显示区域。它从左上角的 0px 0px 开始，与打开的浏览器窗口一样宽/高（减去滚动条、框架、标题栏等）。

在示例中，它试图通过计算您在浏览器的“可视区域”中单击的位置并将其添加到“可视区域”的下方/右侧多远来获取页面上事件的绝对位置" 已在页面上滚动。

【讨论】：

谢谢，我对“窗口的客户区”的含义感到困惑。我想和你确认我的理解是正确的。在我在原始问题中发布的示例中，我认为 id 为“星”的对象星的鼠标移动事件会将小星图像区域视为“窗口的客户区域”，这样理解正确吗？
不，检查编辑。示例是获取明星在页面上的绝对位置，并将其与事件页面上的绝对位置进行比较。

【解决方案2】：

我在我的网站http://www.alterboutique.com 上使用此脚本时遇到了同样的问题

我在这里找到了解决方案： experts-exchange

在页面底部，有一个来自 Kravimir 的帖子，他给出了用他的代码替换函数 XY 的代码的解决方案：

function XY(e,v) {
  e=e||window.event;
  var d=document,dE=d.documentElement,o;
  if(typeof(e.pageX)=='number')
    o={'X':e.pageX,'Y':e.pageY};
  else 
    o={'X':e.clientX+d.body.scrollLeft+(dE?dE.scrollLeft:0),
      'Y':e.clientY+d.body.scrollTop+(dE?dE.scrollTop:0)};
  return(v?o[v]:o);
}

【讨论】：