javascript - javascript 中的 event.clientX 位置问题

Question

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

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

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

Answer 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)以获得该点的总像素位置。

即如果您正在查看向下滚动 200 像素的页面，并且鼠标点击发生在客户端查看区域下方 200 像素处，那么也就是文档下方 400 像素处。

编辑:

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

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